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