我想要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>