在我的Javascript搜索中添加自动完成的Algolia场所

时间:2018-10-16 09:59:25

标签: javascript autocomplete algolia

我正在使用Algolia使用香草Javascript,instantsearch和传单地图在画廊网站上检索搜索结果。目前,我有Algolia autocomplete用于搜索绘画。我还想添加Algolia位置,以便用户搜索在特定范围内出现的画廊。但这还行不通。目前,我只是在使用硬编码位置进行测试。任何人都可以协助我解决我的代码中不起作用的问题。 非常感谢。

var titlesDataset = {
    source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
    displayKey: 'title',
    name: 'title',
    templates: {
      header: '<div class="ad-example-header">Painting</div>',
      suggestion: function(suggestion) {
        return "<span><img class='search-thumbnail' src='https://res.cloudinary.com/b3/q_auto,f_auto,h_180,dpr_auto/" + suggestion['field_file_name:file'] + "'><span>" + suggestion._highlightResult.title.value + "</span>";
      }
    }
  };

var algoliaPlacesData = placesAutocompleteDataset({
  algoliasearch: algoliasearch,
  type: 'address',
  container: document.querySelector('#aa-search-input'),
  templates: {
    header: '<div class="ad-example-header">Places</div>'
  },
  hitsPerPage: 3,
});

 var autocompleteInstance = autocomplete(document.querySelector('#aa-search-input'), {
    hint: false,
    debug: true,
    cssClasses: {prefix: 'ad-example'}
  }, [
    titlesDataset,
    algoliaPlacesData
  ]);  
var autocompleteChangeEvents = ['selected', 'autocompleted'];
  autocompleteChangeEvents.forEach(function(eventName) {
    autocompleteInstance.on('autocomplete:'+ eventName, function(event, suggestion, datasetName) {
      if (datasetName == 'title') {
        search.helper.setQuery(suggestion.title).search();
      }
      if (datasetName == 'places') {
        // let location = [suggestion.latlng.lat, suggestion.latlng.lng];
        // let latLoc = suggestion.latlng.lat;
        // let lngLoc = suggestion.latlng.lng;
        search.helper.setQueryParameter('aroundLatLng', '0.5137, -0.0985');
        search.helper.setQueryParameter('aroundRadius', 5000);
        search.helper.search();
      }
    });
  });

0 个答案:

没有答案