我正在使用Algolia提供的
instantsearch.js库.
我想要的行为是：如果访问者没有在搜索框中输入任何内容,则不会返回任何结果.
然而,Algolia documentation指出：
If no query parameter is set,the textual search will match with all
the objects.
是否可以在使用instantsearch.js的同时更改此行为？
这是我目前的代码：
<script type="text/javascript" src="http://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<script type="text/javascript">
window.onload = function ()
{
function getTemplate(templateName) {
return document.getElementById(templateName + '-template').innerHTML;
}
var search = instantsearch({
appId: '{{config["ALGOLIA_APPLICATION_ID"]}}',apiKey: '{{config["ALGOLIA_API_KEY"]}}',indexName: '{{config["ALGOLIA_INDEX_NAME"]}}',urlSync: true
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-input'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',hitsPerPage: 10,templates: {
item: getTemplate('hit'),empty: getTemplate('no-results')
}
})
);
search.start();
};
</script>
解决方法
您可以使用searchFunction并检查基础帮助程序状态以检查查询是否为空.基于此,您可以显示/隐藏搜索结果div.
var search = instantsearch({
[...],searchFunction: function(helper) {
var homePage = $('.home-page');
var searchResults = $('.search-results');
if (helper.state.query === '') {
// empty query string -> hide the search results & abort the search
searchResults.hide();
homePage.show();
return;
}
// perform the regular search & display the search results
helper.search();
homePage.hide();
searchResults.show();
}
}
这也是官方网站上的documented.