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

【问题标题】：Display searchbar and search results on different html pages using AJAX使用 AJAX 在不同的 html 页面上显示搜索栏和搜索结果
【发布时间】：2018-03-26 18:16:09
【问题描述】：

我的网站顶部有一个搜索栏/菜单。我将这个顶部栏制作成一个模板（称为_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 时，如下所示：

<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 呈现的，并且只有在进行 Search.cshtml AJAX 调用后才会显示在 DOM 上。

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

为清楚起见，这是我的 UX 流程：

用户在首页->点击页面顶部的搜索栏搜索项目->正文内容通过AJAX加载搜索结果页面->用户类型搜索查询->结果显示在ajax渲染页面上。

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

【问题讨论】：

标签： javascript c# html ajax algolia

【解决方案1】：

你可以在这里做的是：

定义所有的 dom 容器。然后，您可以有一个样式化的搜索输入，但点击隐藏。
然后，您可以在点击搜索框时启动 Instantsearch.js js，但仍然隐藏点击。
在第一次击键时，您可以显示命中。

【讨论】：