私は自分のウェブサイトの上部に検索バー/メニューを持っています。このトップバーをテンプレート（_Layouts.cshtmlという名前）にして、本文の内容にかかわらずすべてのHTMLページにトップバーを表示させました。検索バーと結果は私の_Layouts.cshtmlの下部にJavaScriptを使用して作成されています。私はアイテムを検索するための検索バーをクリックすると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ウィジェットは、私はこのような私の_Layouts.cshtmlで#search-boxを分離するときので、同じHTMLページにする必要があることです。
<div id="search-box">
<!-- Search bar is generated here -->
</div>
と検索結果はSearch.cshtmlのようになります：
<div class="artist-search-result">
<!-- results are generated here -->
</div>
海このクラスはAJAX経由でレンダリングされ、Search.cshtml AJAX呼び出しが行われるとDOMにのみ表示されるため、コンテナ.artist-search-resultが見つからないため、rchバーはレンダリングされません。この問題を解決するための最良の方法だろう何
？
明確にするために、ここに私UXの流れです：
ユーザーは、ホームページ上にある - >アイテムを検索するためのページの上部にある検索バーをクリック - > [本文の内容はAJAXを介して検索結果ページをロードする - > [ユーザーの種類の検索query - >結果がajaxのレンダリングされたページに表示されます。
私はブラウザ専用から直接Search.cshtmlをアップロードした場合、検索バーは、レンダリングと.artist-search-resultクラスは、最初のDOM負荷に存在するので、私はきちんと私の結果を見ることができるので、これは、問題であることを確認することができます