手风琴JQuery搜索

Question

我在我正在建设的网站上设置了手风琴但是我一直在尝试实现搜索功能。 键入时可能隐藏＆amp;根据搜索显示每个手风琴。

这是我的两张牌的HTML代码，它们是手风琴的一部分：

docker run -d --name roundcube roundcube

这也包括我的搜索栏。

但是我需要根据文本搜索显示卡片。 我尝试了以下操作，但即使按下按钮它也不起作用：

psql: could not translate host name "postgres" to address: Temporary failure in name resolution
Postgres is unavailable - sleeping

有人能指出我正确的方向吗？

Answer 1

＆＃13;

＆＃13;

$(document).ready(function(){
  $("#searcher").on("keypress click input", function () {
      var val = $(this).val();
      if(val.length) {
          $(".accordion .card.m-b-0").hide().filter(function () {
              return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
          }).show();
      }
      else {
          $(".accordion .card.m-b-0").show();
      }
  });
  
  
  //for test
  //$("#searcher").val('us').keyup();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-container">
            <input class="input-medium search-query" id="searcher" placeholder="Search">
            <button class="btn">Search</button>
    </div>
    <br>
    <div id="accordion" class="accordion">
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <a class="card-title">
                    Why should I use Imperial Claims Consultants?
                </a>
            </div>
            <div id="collapseOne" class="card-block collapse" style="padding: 20px;">
                <p>
                      We help them clients who have suffered from the insurance covered perils relating to building and/or
                
                </p>
                <p>
                    We help clients  who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>               
            </div>
        </div>
        <br>
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                <a class="card-title">
                    Which insurance claims can Imperial Claims Consultants help me with?
                </a>
            </div>
            <div id="collapseTwo" class="card-block collapse" style="padding: 20px;">
                <p>
                    We help clients who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>               
                <p>
                    So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service.
                </p>
                
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

根据您的要求我更新了答案

＆＃13;

＆＃13;

$(document).ready(function(){
  $("#searcher").on("keypress click input", function () {
      var val = $(this).val();
      if(val.length) {
          $(".accordion .card.m-b-0 .collapsed").hide().filter(function () {
              return $('.card-block', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
          }).show();
      }
      else {
          $(".accordion .card.m-b-0 .collapsed").show();
      }
  });
  
  
  //for test
  //$("#searcher").val('us').keyup();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-container">
            <input class="input-medium search-query" id="searcher" placeholder="Search">
            <button class="btn">Search</button>
    </div>
    <br>
    <div id="accordion" class="accordion">
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <a class="card-title">
                    Why should I use Imperial Claims Consultants?
                </a>
            </div>
            <div id="collapseOne" class="card-block collapse" style="padding: 20px;">
                <p>
                      We help them clients who have suffered from the insurance covered perils relating to building and/or
                
                </p>
                <p>
                    We help clients  who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>               
            </div>
        </div>
        <br>
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                <a class="card-title">
                    Which insurance claims can Imperial Claims Consultants help me with?
                </a>
            </div>
            <div id="collapseTwo" class="card-block collapse" style="padding: 20px;">
                <p>
                    We help clients who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>               
                <p>
                    So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service.
                </p>
                
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;