Algolia JavaScript позвони для поиска автозаполнения

Question

var client = algoliasearch(algClient, apiKey);
var index = client.initIndex(algIndex);
var paintingAutocomplete = {
  source: autocomplete.sources.hits(index, { hitsPerPage: 4 }),
  displayKey: "title",
  templates: {
    header: '<div class="ad-example-header">Painting</div>',
    suggestion: function(suggestion) {
      console.log(suggestion);

      return (
        '<img class="search-thumbnail" src="https://res.cloudinary.com/b3/h_360/' +
        suggestion["field_file_name:file"] +
        '" />' +
        suggestion.title
      );
    }
  }
};

var autocompleteInstance = autocomplete(
  document.querySelector("#search-input"),
  {
    hint: false,
    debug: true,
      cssClasses: { prefix: 'ad-example'}
  },
  [
    paintingAutocomplete,
  ]
).on("autocomplete:selected", function(event, suggestion) {
    // console.log(suggestion, );
});

var autocompleteChangeEvents = ["selected", "autocompleted"];

autocompleteChangeEvents.forEach(function(eventName) {
  autocompleteInstance.on("autocomplete:" + eventName, function(event, suggestion, datasetName) {
    // Call the search here...
  });
});

search.start();

Я делаю поиск картин и использую algolia api, instantsearch и autocomplete.js. Я добавил автозаполнение, но результаты не обновляются при выборе автозаполненного ответа. Как вызвать поисковый виджет из InstantSearch при выборе элемента. В настоящее время он просто ищет то, что я печатаю в поле поиска.

Answer 1

Вот песочница с автозаполнением в качестве окна поиска для вдохновения: https://codesandbox.io/s/y79ww39xyv