我正在尝试使用反应式搜索进行基于过滤器的搜索。但是，我坚持使用结果卡实现。目前，结果卡仅显示我的弹性搜索数据库中的特定内容。但是，我需要结果卡具有响应性，即当单击结果卡时，应在屏幕上呈现一个弹出窗口，显示特定搜索结果的其他详细信息。
我尝试实现一些 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>
),
};
}}
/>