手風琴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.mb-0").hide().filter(function () { return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1; }).show(); } else { $(".accordion .card.mb-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 mb-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 mb-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.mb-0 .collapsed").hide().filter(function () { return $('.card-block', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1; }).show(); } else { $(".accordion .card.mb-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 mb-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 mb-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>