使用AJAX在不同的html頁面上顯示搜索欄和搜索結果

我的網站頂部有一個搜索欄/菜單。我將這個頂部欄放到了一個模板中（稱爲_Layouts.cshtml），這樣我就可以在每個HTML頁面上呈現頂部欄，而不管正文內容如何。搜索欄和結果使用JavaScript創建在我_Layouts.cshtml底部：使用AJAX在不同的html頁面上顯示搜索欄和搜索結果

<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，因此無法呈現rch條，因爲此類是通過AJAX呈現的，並且只有在調用了AJAX調用後才顯示在DOM上。

什麼是解決這一問題的最佳方法？

爲了清楚起見，這裏是我的UX流量：

用戶的主頁上 - >點擊搜索欄，在頁面頂部搜索項目 - >用戶鍵入搜索 - >正文內容通過AJAX加載搜索結果頁面查詢 - >結果顯示在ajax呈現的頁面上。

我可以確認這是問題，因爲如果我直接從browswer加載了Search.cshtml，搜索欄渲染，我可以正確地看到我的成績，因爲.artist-search-result類初始DOM負載存在

來源

2017-10-14 Jordan Lewallen

你可以在這裏做的是：

定義你所有的dom容器。然後你可以有一個風格的搜索輸入，但隱藏的命中。
然後，您可以在搜索框上點擊時啓動instantsearch.js js，但仍然隱藏點擊。
在第一次擊鍵時，您可以顯示命中。

來源

2017-10-16 11:52:34 Marie

使用AJAX在不同的html頁面上顯示搜索欄和搜索結果

回答

相關問題