搜索 algolia 会在搜索前显示所有数据答案

【问题标题】：the search for algolia display all the data before doing the search搜索 algolia 会在搜索前显示所有数据
【发布时间】：2021-12-25 17:28:57
【问题描述】：

我安装了algolia包，我配置了它，它工作正常，但还有一个问题，就是在搜索之前输入搜索中显示的数据。有关更多信息，请参阅该网站。网址：link

searche.blade.php

<div class="container">
    <div id="search-box">
        <!-- SearchBox widget will appear here -->
    </div>
    <div id="hits">
        <!-- Hits widget will appear here -->
    </div>
    <div class="aa-input-container" id="aa-input-container">
        <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for posts" name="search" autocomplete="off" />
    </div>
</div>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.2/dist/instantsearch.min.css">
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.2/dist/instantsearch.min.js"></script>

    <script type="text/template" id="hits-temp">
        @{{ __highlightResult.h1 }}
        <div class="row song">
            <a class="song-link" href="song/@{{objectID}}">@{{{_highlightResult.title.value}}}</a>
        </div>
    
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            const search = instantsearch({
                appId: 'H329YTS1B5',
                apiKey: '10a91d843aaeef2d91583bfead9b339f',
                indexName: 'title',
                urlSync: false
            });
            // initialize SearchBox
            search.addWidget(
                instantsearch.widgets.searchBox({
                    container: '#search-box',
                    placeholder: 'Search for posts',
                    wrapInput: false,
                    cssClasses: {
                        input: 'form-control'
                    }
                })
            );
            // initialize hits widget
            search.addWidget(
                instantsearch.widgets.hits({
                    container: '#hits',
                    templates: {
                        empty: 'No results',
                        item: $('#hits-temp').html()
                    }
                })
            );
            search.start();
        });
    </script>

【问题讨论】：

标签： php laravel autocomplete algolia instantsearch.js

【解决方案1】：

当搜索查询为空时，搜索默认匹配所有记录。

如果您想在搜索框为空时隐藏结果，则需要一些额外的代码：

https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/js/#handling-empty-queries

【讨论】：