阿尔及利亚多个搜索框

时间:2018-06-28 09:14:11

标签: autocomplete algolia

我想要2个搜索框。一个用于台式机,另一个用于移动用户。两者具有完全相同的功能。

我认为我可以简单地复制JS创建另一个具有不同ID但没有运气的Search输入。

这就是我正在使用的东西:

输入1:

<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search..." name="search" autocomplete="off" />

输入2:

<input type="search" id="aa-search-input-2" class="aa-input-search" placeholder="Search..." name="search" autocomplete="off" />

JS:

    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>   

    <script>
      var client = algoliasearch('xxxx', 'xxx');
      var index = client.initIndex('features');       
      $('#aa-search-input').autocomplete(
        {hint: false, debug: false}, [
        {
          source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 15 }),
          displayKey: 'name',
          templates: {
            suggestion: function(suggestion) {
              return '<a href="' + suggestion.slug + '"><img src="'+ suggestion.heroImage +'" alt="' + suggestion.shortTitle +'"/><span>' + suggestion._highlightResult.shortTitle.value + ', ' + suggestion._highlightResult.contributorTitle.value + '</span></a>';
            },
            empty: function(suggestion) {
              return '<span class="search-empty">No features found</span>';
            }
          }
        }
      ]);

$('#aa-search-input-2').autocomplete(
        {hint: false, debug: false}, [
        {
          source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 15 }),
          displayKey: 'name',
          templates: {
            suggestion: function(suggestion) {
              return '<a href="' + suggestion.slug + '"><img src="'+ suggestion.heroImage +'" alt="' + suggestion.shortTitle +'"/><span>' + suggestion._highlightResult.shortTitle.value + ', ' + suggestion._highlightResult.contributorTitle.value + '</span></a>';
            },
            empty: function(suggestion) {
              return '<span class="search-empty">No features found</span>';
            }
          }
        }
      ]);
    </script> 

0 个答案:

没有答案