如果查詢為空，如何將 Algolia 設置為不返回任何結果？

Question

我使用的是instantsearch.js由Algolia提供的庫。

我想要的行為是：如果訪問者沒有在搜索框中輸入任何內容，則不會返回任何結果。

但是，Algolia 文檔指出：

如果未設置查詢參數，則文本搜索將匹配所有對象。

是否可以在仍然使用 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>

Answer 1

您可以使用searchFunction並檢查底層幫助程序state來檢查查詢是否為空。 基於此，您可以顯示/隱藏搜索結果 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();
  }
}

這也記錄在官方網站上。

Answer 2

@aseure 的解決方案將導致腳本在單擊輸入中的“x”以清除搜索查詢時return ing。 以下內容在不破壞任何內容的情況下實現了目標：

const search = instantsearch({
  /* other parameters */
  searchFunction(helper) {
    const container = document.querySelector('#results');

    if (helper.state.query === '') {
      container.style.display = 'none';
    } else {
      container.style.display = '';
    }

    helper.search();
  }
});

上面的例子取自這里的文檔： https : //www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/js/#handling-empty-queries