0
Jqueryを使用してWebページに検索ボックスを実装しようとしています。しかし、検索は期待どおりに機能していません。ユーザーが検索ボックスに何かを入力したとき。それは、ラジオ加入者、アクセスコントロールリストなどの項目名を検索する必要があります。Jquery検索ボックスの実装
また、誰も私はWebページ全体で同様の検索を実装するのに役立ちます。助けていただければ幸いです。
<div id="form_search">
<form class="searchFaq" action="#">
<input class="filterinput1" placeholder="Search for Catalog Items" type="text">
</form>
</div>
<div id="allItems" class="col-sm-3">
<a style="text-decoration: none; display: inline-block;" href="catalog.do?sysparm_id=36c0754109715940963780fde6ca6e78&sysparm_table=sc_cat_item">
<div class="panel panel-default" style="height: 275px; width: 275px; display: block;">
<div class="panel-heading" style="height: 90px; display: block;">
<div class="span_item" style="color: rgb(66, 139, 202); display: block;">Radio Subscriber</div>
</div>
<div class="panel-body" style="display: block;">
</div>
</a>
</div>
<div id="allItems" class="col-sm-3">
<a style="text-decoration: none" href="catalog.do?sysparm_id=193ca5f809791940963780fde6ca6e6e&sysparm_table=sc_cat_item">
<div class="panel panel-default" style="height:275px;width:275px">
<div class="panel-heading" style="height:90px">
<div class="span_item" style="color:#428bca">Access Control List</div>
</div>
<div class="panel-body">
</div>
</a>
</div>
スクリプト：あなたの
のHTMLをありがとう
<script type="text/javascript">
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
//live search function
function live_search(list) {
$(".filterinput1")
.change(function() {
//getting search value
var searchtext = $(this).val();
if(searchtext) {
//finding If content matches with searck keyword
$matches = $(list).find('div:Contains(' + searchtext + ')').parent();
//hiding non matching lists
$('div', list).not($matches).slideUp();
//showing matching lists
$matches.slideDown();
} else {
//if search keyword is empty then display all the lists
$(list).find("div").slideDown(200);
}
return false;
})
.keyup(function() {
$(this).change();
});
}
$(function() {
live_search($("#allItems"));
});
}(jQuery));
</script>