手风琴 JQuery 搜索
[英] Accordion JQuery Search
本文介绍了手风琴 JQuery 搜索的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我正在构建的网站上设置了手风琴，但我一直在尝试实现搜索功能.可能在您键入时隐藏 &根据搜索显示每个手风琴.
这是我的两张卡片的 HTML 代码，它们是手风琴的一部分:
<input class="input-medium search-query" id="searcher" placeholder="Search"><button class="btn">搜索</button>
<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">为什么我应该使用 Imperial Claims Consultants?</a>
<div id="collapseOne" class="card-block collapse" style="padding: 20px;"><p>Imperial Claims 是处理商业、工业、房主和房东保险索赔的行业专家，我们已经并将继续为我们的客户提供真正个性化的定制服务.凭借 80 多年的综合内部索赔处理经验，我们尚未管理过任何类型的灾难.从小额索赔到最大的索赔，我们都可以提供真正的帮助.</p><p>损失评估员通常是专业的公司和个人，他们将代表保单持有人进行谈判以将索赔推进到解决方案.可以说他们为投保人提供理赔管理服务，这意味着投保人不必花时间与保险公司打交道——损失评估员通常会这样做.</p><p>损失评估员，如 Imperial Claims Consultants，将查看损失，评估所涉及的成本，然后他们可以带头与相关保险公司或损失理算师讨论索赔.损失评估师受雇于保单持有人，他们专门负责保护保单持有人的最大利益.</p><p>Imperial Claims Consultants 是金融行为监管局注册的公司.我们被授权协助客户处理他们的保险索赔.我们只为投保人工作，从不为保险公司工作.如果被保险人使用我们的承包商小组，我们的服务将不收取任何费用.</p><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p><ul><li><span>- </span>火</li><li><span>- </span>洪水</li><li><span>- </span>爆炸</li><li><span>- </span>风暴</li><li><span>- </span>冲击损伤</li><li><span>- </span>沉降</li><li><span>- </span>盗窃</li><li><span>- </span>入室盗窃</li><li><span>- </span>内容</li><li><span>- </span>业务损失</li><li><span>- </span>责任索赔</li><li><span>- </span>专业赔偿</li><li><span>- </span>失去执照</li>
<br><div class="card m-b-0"><div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><a class="card-title">Imperial Claims Consultants 可以帮助我处理哪些保险索赔?</a>
<div id="collapseTwo" class="card-block collapse" style="padding: 20px;"><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p><ul><li><span>- </span>火</li><li><span>- </span>洪水</li><li><span>- </span>爆炸</li><li><span>- </span>风暴</li><li><span>- </span>冲击损伤</li><li><span>- </span>沉降</li><li><span>- </span>盗窃</li><li><span>- </span>入室盗窃</li><li><span>- </span>内容</li><li><span>- </span>业务损失</li><li><span>- </span>责任索赔</li><li><span>- </span>专业赔偿</li><li><span>- </span>失去执照</li><p>因此，在您联系保险公司之前，请联系 Imperial Claims Consultants 以获得非常个性化的定制服务.</p><p>不要忘记，如果我们的姊妹公司，Imperial Maintenance 和/或其分包商被用于管理整个恢复工作过程，那么您真的不需要支付一分钱，因为我们的费用将由我们支付姐妹公司.</p>
这也包括我的搜索栏.
但是我需要根据文本搜索显示卡片.我尝试了以下操作，但是即使使用按钮也不起作用:
$("#searcher").on("keyup 点击输入", function () {var val = $(this).val();如果(val.length){$(".accordion .card.m-b-0").hide().filter(function () {返回 $('input', this).val().toLowerCase().indexOf(val.toLowerCase()) !== -1;}).展示();}别的 {$(".accordion .card.m-b-0").show();}});
有人能指出我正确的方向吗?
解决方案
$(document).ready(function(){$("#searcher").on("按键点击输入", function () {var val = $(this).val();如果(val.length){$(".accordion .card.m-b-0").hide().filter(function () {return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) >-1;}).展示();}别的 {$(".accordion .card.m-b-0").show();}});//用于测试//$("#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">搜索</button>
<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">为什么我应该使用 Imperial Claims Consultants?</a>
<div id="collapseOne" class="card-block collapse" style="padding: 20px;"><p>我们帮助那些遭受与建筑和/或相关的保险承保风险的客户</p><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p>
<br><div class="card m-b-0"><div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><a class="card-title">Imperial Claims Consultants 可以帮助我处理哪些保险索赔?</a>
<div id="collapseTwo" class="card-block collapse" style="padding: 20px;"><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p><p>因此，在您联系保险公司之前，请联系 Imperial Claims Consultants 以获得非常个性化的定制服务.</p>
根据您的要求，我已更新答案
$(document).ready(function(){$("#searcher").on("按键点击输入", function () {var val = $(this).val();如果(val.length){$(".accordion .card.m-b-0 .collapsed").hide().filter(function () {return $('.card-block', this).text().toLowerCase().indexOf(val.toLowerCase()) >-1;}).展示();}别的 {$(".accordion .card.m-b-0 .collapsed").show();}});//用于测试//$("#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">搜索</button>
<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">为什么我应该使用 Imperial Claims Consultants?</a>
<div id="collapseOne" class="card-block collapse" style="padding: 20px;"><p>我们帮助那些遭受与建筑和/或相关的保险承保风险的客户</p><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p>
<br><div class="card m-b-0"><div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><a class="card-title">Imperial Claims Consultants 可以帮助我处理哪些保险索赔?</a>
<div id="collapseTwo" class="card-block collapse" style="padding: 20px;"><p>我们帮助遭受与建筑物和/或内容相关的保险承保风险的客户，例如:</p><p>因此，在您联系保险公司之前，请联系 Imperial Claims Consultants 以获得非常个性化的定制服务.</p>
I have an accordion set up on a website i am building however i have been trying to implement a search function.
Potentially as you type, to hide & display each accordion based on the search.
here is my HTML code for two cards which are part of the accordion:
<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>
This also includes my search bar.
However I need to display a card based on an on text search.
I tried the following however it didn't work even with a button:
$("#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();
}
});
Can someone point me in the correct direction?
解决方案
$(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>
On Your Request I have updated The answer
$(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>
这篇关于手风琴 JQuery 搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
