Я пытаюсь сделать поиск на основе фильтра, используя реактивный поиск. Тем не менее, я застрял с реализацией карты результата. В настоящее время карта результатов отображает только определенный контент из моей эластичной базы данных поиска. Однако мне нужно, чтобы карта результатов реагировала в том смысле, что при нажатии карты результатов на экране должно отображаться всплывающее окно, отображающее дополнительные сведения о конкретном результате поиска.
Я попытался реализовать несколько всплывающих окон CSS и Javascript, но не могу отобразить содержимое каждого элемента поиска.
<ResultCard
componentId="results"
dataField="original_title"
react={{
and: [
"mainSearch",
"RangeSlider",
"Brand-list",
"Segment-list",
"fuel-list"
]
}}
pagination={true}
className="Result_card"
paginationAt="bottom"
pages={5}
size={12}
Loader="Loading..."
noResults="No results were found..."
sortOptions={[
{
dataField: "Price__in_Lakhs_",
sortBy: "asc",
label: "Sort by Price (Low to High) \u00A0"
},
{
dataField: "Price__in_Lakhs_",
sortBy: "desc",
label: "Sort by Price (High to Low) \u00A0 \u00A0"
},
{
dataField: "Variants.keyword",
sortBy: "asc",
label: "Sort by Variant (A-Z) \u00A0"
}
]}
innerClass={{
title: "result-title",
listItem: "result-item",
list: "list-container",
sortOptions: "sort-options",
resultStats: "result-stats",
resultsInfo: "result-list-info"
}}
onData={function(res) {
return {
description: (
<div className="main-description">
<div className="ih-item square effect6 top_to_bottom">
<a target="#" href={"" + res.Index}>
<div className="img">
<img
src={"" + res.Index}
alt={""}
className="result-image"
/>
</div>
<div className="info colored">
<h3 className="overlay-title">
{res.Variants}
<div className="overlay-description">
{res.Model}
</div>
<div className="overlay-info">
<div className="rating-time-score-container">
<div className="sub-title Rating-data">
<b>
Price:
<span className="details">
{" "}
{res.Price__in_Lakhs_}
{" Lakhs"}
</span>
</b>
</div>
<div className="sub-title Score-data">
<b>
Segment:
<span className="details">
{" "}
{res.Segment}
</span>
</b>
</div>
</div>
<div className="revenue-lang-container">
<div className="revenue-data">
<b>
<span>Brand: </span>{" "}
<span className="details">
{" "}
{res.Brand}
</span>{" "}
</b>
</div>
<div className="sub-title language-data">
<b>
Mileage:
<span className="details">
{" "}
{res.Mileage__ARAI_} Kmpl
</span>
</b>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
),
};
}}
/>