使用AJAX

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页面上，因为当我将#search-box分开到_Layouts.cshtml时像这样：

<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上。

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

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

用户在主页上 - ＆gt;点击页面顶部的搜索栏搜索商品 - ＆gt;正文内容通过AJAX加载搜索结果页面 - ＆gt;用户类型搜索查询 - ＆gt;结果显示在ajax渲染页面上。

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

Answer 1

你在这里可以做的是：

1. 定义所有dom容器。然后，您可以使用样式搜索输入，但隐藏的命中。

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

3. 在第一个击键时，您可以显示命中。