J'ai une barre de recherche/menu en haut de mon site. J'ai fait de cette barre supérieure dans un modèle (appelé _Layouts.cshtml) de sorte que je rends la barre du haut sur chaque page html quel que soit le contenu du corps. Les résultats et searchbar sont créés en utilisant javascript en bas de mon _Layouts.cshtml:Afficher la barre de recherche et les résultats de recherche sur différentes pages html en utilisant AJAX
<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>
Lorsque je clique sur la barre de recherche pour rechercher un élément, je charge le résultats de recherche en utilisant 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());
}
});
});
});
La question que j'ai rencontré est que les deux widgets searchBox et hits doivent être sur la même page html parce que quand je sépare la #search-box dans mon _Layouts.cshtml comme ceci:
<div id="search-box">
<!-- Search bar is generated here -->
</div>
et les résultats de la recherche dans mon Search.cshtml comme ceci:
<div class="artist-search-result">
<!-- results are generated here -->
</div>
La mer barre rch ne rend pas car il ne peut pas trouver le conteneur .artist-search-result parce que cette classe est rendue via AJAX et n'apparaît sur le DOM qu'une fois l'appel AJAX Search.cshtml est faite.
Quelle serait la meilleure approche pour résoudre ce problème?
Pour plus de clarté, voici mon flux UX:
L'utilisateur est à la page d'accueil -> cliquez searchbar en haut de la page pour rechercher l'article -> le contenu du corps charge la page de résultats de recherche via AJAX -> types d'utilisateur recherche requête -> affichage des résultats sur la page de rendu ajax.
Je peux confirmer cela est la question, parce que si je charge le Search.cshtml directement à partir du browswer, la barre de recherche rend et je peux voir mes résultats correctement car la classe .artist-search-result existe sur la charge DOM initiale