Function autocomplete

Example

import { autocomplete } from '@nosto/autocomplete';

// Basic usage
autocomplete({
  inputSelector: '#search',
  dropdownSelector: '#dropdown',
  render: (container, state) => {
    container.innerHTML = `
       <div>
        <h1>${state.query}</h1>
       <ul>
       ${state.response.products
         .map((product) => `<li>${product.name}</li>`)
         .join('')}
      </ul>
    </div>
   `;
  },
  fetch: {
    products: {
      fields: ['name', 'url', 'imageUrl', 'price', 'listPrice', 'brand'],
      size: 5
    },
    keywords: {
      size: 5,
      fields: ['keyword', '_highlight.keyword'],
      highlight: {
        preTag: `<strong>`,
        postTag: '</strong>'
      }
    }
  }
});

// Liquid template.
import { autocomplete, fromRemoteLiquidTemplate, fromLiquidTemplate, defaultLiquidTemplate } from '@nosto/autocomplete/liquid';

autocomplete({
  inputSelector: '#search',
  dropdownSelector: '#dropdown',
  render: fromRemoteLiquidTemplate('autocomplete.liquid'),
  // Or:
  render: window.nostoAutocomplete.fromLiquidTemplate(defaultLiquidTemplate),
  ...
});

// Mustache template.
import { autocomplete, fromRemoteMustacheTemplate, fromMustacheTemplate, defaultMustacheTemplate } from '@nosto/autocomplete/mustache';

autocomplete({
  inputSelector: '#search',
  dropdownSelector: '#dropdown',
  render: fromRemoteMustacheTemplate('autocomplete.mustache'),
  // Or:
  render: fromMustacheTemplate(defaultMustacheTemplate),
  ...
});

// React example.
import { autocomplete, Autocomplete } from '@nosto/autocomplete/react';
import ReactDOM from 'react-dom';

let reactRoot;

autocomplete({
  inputSelector: '#search',
  dropdownSelector: '#dropdown',
  render: function (container, state) {
    if (!reactRoot) {
      reactRoot = ReactDOM.createRoot(container);
    }
    reactRoot.render(<Autocomplete {...state} />);
  },
  ...
});
Copy