使用 AJAX 在不同的 html 页面上显示搜索栏和搜索结果

Question

我的网站顶部有一个搜索栏/菜单。 我将此顶部栏制作为模板（称为_Layouts.cshtml ），以便我在每个 html 页面上呈现顶部栏，而不管正文内容如何。 搜索栏和结果是使用_Layouts.cshtml底部的 javascript 创建的：

<script>
        //Algolia Search JS
        const search = instantsearch({
            appId: 'MYID',
            apiKey: 'MYAPI',
            indexName: 'unearth',
            urlSync: true
        });

        search.addWidget(
            instantsearch.widgets.searchBox({
                container: '#search-box',
                placeholder: 'Search by artist, mood, bpm, or genre...'
            })
        );

        search.addWidget(
            instantsearch.widgets.hits({
                container: '.artist-search-result',
                templates: {
                    empty: 'No results',
                    item: "<img src='/resources/images/flume_prof_pic.jpg'><div class='search-result-meta'><h3>{{{artist}}}</h3><h3 class='search-result-type'>Artist</h3></div>"           
                }
            })
        );

        search.start();
        //End Algolia Search JS
    </script>

当我单击搜索栏搜索项目时，我使用 AJAX 加载搜索结果页面。

$(function () {
    $("#search-box").click(function () {
        $.ajax({
            url: "home/search", success: function (result) {
                //$(".body-container").html(result);
                $('.body-container').html($(result).find('.search-results-container').html());
            }
        });

    });
});

我遇到的问题是searchBox和hits小部件都需要在同一个 html 页面上，因为当我像这样将_Layouts.cshtml #search-box的#search-box分开时：

<div id="search-box">
<!-- Search bar is generated here -->
</div>

我的Search.cshtml的搜索结果如下所示：

<div class="artist-search-result">
<!-- results are generated here -->
</div>

搜索栏不会呈现，因为它找不到容器.artist-search-result因为此类是通过 AJAX 呈现的，并且只有.artist-search-result Search.cshtml AJAX 调用后才会显示在 DOM 上。

解决此问题的最佳方法是什么？

为清楚起见，这是我的用户体验流程：

用户在主页 -> 单击页面顶部的搜索栏搜索项目 -> 正文内容通过 AJAX 加载搜索结果页面 -> 用户键入搜索查询 -> 结果显示在 ajax 呈现的页面上。

我可以确认这是问题所在，因为如果我直接从浏览器加载 Search.cshtml，搜索栏会呈现并且我可以正确地看到我的结果，因为.artist-search-result类存在于初始 DOM 加载中

Answer 1

你可以在这里做的是：

1. 定义所有的 dom 容器。 然后您可以有一个样式化的搜索输入，但点击隐藏。

2. 然后，您可以在点击搜索框时启动 instantsearch.js js，但仍然隐藏点击。

3. 在第一次击键时，您可以显示点击次数。