我正在使用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.