javascript – 如果查询为空,如何将Algolia设置为不返回任何结果?

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...