如何使结果卡/列表响应

Question

我正在尝试使用反应性搜索进行基于过滤器的搜索。但是，我坚持使用结果卡实现。当前，结果卡仅显示我的弹性搜索数据库中的特定内容。但是，我需要结果卡在某种意义上是响应的，因为当单击结果卡时，应在屏幕上呈现弹出窗口，以显示特定搜索结果的其他详细信息。

我尝试实现几个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>
                ),
              };
            }}
          />

Answer 1

也许此线程可能会帮助您：https：//stackoverflow.com/a/56685332/9119053。如果这不是您要寻找的内容，请给出适当的上下文，并且代码似乎也存在一些样式问题。