手风琴 JQuery 搜索

Question

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

这是我的两个卡片的 HTML 代码，它们是手风琴的一部分：

<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>
                    Imperial Claims are industry experts in dealing with commercial, industrial, homeowners and landlords insurance claims and we have, and continue to provide our clients with a truly personal and bespoke service. With over 80 years combined in-house claims handling experience there isn’t any type of disaster that we haven’t already managed. From small claims to the largest of claims, we can truly assist.
                </p>
                <p>
                    Loss assessors are typically professional companies and individuals that will negotiate on the policyholder’s behalf to progress a claim to resolution. It could be said that they offer a claims management service for the policyholder, meaning the policyholder doesn’t have to spend time dealing with the insurer – the loss assessor will typically do this.
                </p>
                <p>
                    A Loss Assessor, like Imperial Claims Consultants, will look at the damage, assess the costs involved and they may then take the lead in all discussions on the claim with the insurers or loss adjusters concerned. Loss Assessors are employed by the policyholder, they are acting exclusively to protect the policyholders best interests.
                </p>
                <p>
                    Imperial Claims Consultants are a Financial Conduct Authority registered firm. We are authorised to assist clients with their insurance claims. We work for the policyholder only, never the insurer. Our service will not cost the insured anything provided they use our panel of contractors.
                </p>
                <p>
                    We help clients who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>
                <ul>
                    <li><span> - </span>Fire</li>
                    <li><span> - </span>Flood</li>
                    <li><span> - </span>Explosion</li>
                    <li><span> - </span>Storm</li>
                    <li><span> - </span>Impact Damage</li>
                    <li><span> - </span>Subsidence</li>
                    <li><span> - </span>Theft</li>
                    <li><span> - </span>Burglary</li>
                    <li><span> - </span>Contents</li>
                    <li><span> - </span>Business Loss</li>
                    <li><span> - </span>Liability Claims</li>
                    <li><span> - </span>Professional Indemnity</li>
                    <li><span> - </span>Loss Of Licence</li>
                </ul>
            </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>
                <ul>
                    <li><span> - </span>Fire</li>
                    <li><span> - </span>Flood</li>
                    <li><span> - </span>Explosion</li>
                    <li><span> - </span>Storm</li>
                    <li><span> - </span>Impact Damage</li>
                    <li><span> - </span>Subsidence</li>
                    <li><span> - </span>Theft</li>
                    <li><span> - </span>Burglary</li>
                    <li><span> - </span>Contents</li>
                    <li><span> - </span>Business Loss</li>
                    <li><span> - </span>Liability Claims</li>
                    <li><span> - </span>Professional Indemnity</li>
                    <li><span> - </span>Loss Of Licence</li>
                </ul>
                <p>
                    So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service.
                </p>
                <p>
                    Don’t forget, If our sister company, Imperial Maintenance and/or its sub-contractors are used for managing the entire reinstatement works process, then you truly will not have a single penny to pay at all as our fee would be paid by our sister company.
                </p>
            </div>
        </div>

这也包括我的搜索栏。

但是，我需要根据文本搜索显示卡片。 我尝试了以下方法，但即使使用按钮也无法正常工作：

 $("#searcher").on("keyup click input", function () {
    var val = $(this).val();
    if(val.length) {
        $(".accordion .card.m-b-0").hide().filter(function () {
            return $('input', this).val().toLowerCase().indexOf(val.toLowerCase()) !== -1;
        }).show();
    }
    else {
        $(".accordion .card.m-b-0").show();
    }
});

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

Answer 1

$(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();
});

<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>

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

$(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();
});

<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>