このプラグインは、正規表現を使用して、検索入力に基づいてコンテンツをリアルタイムで並べ替えます。
次のような検索用のボタンをいくつか作成しました。
<input id="searchbox" type="text" class="searchFilter" onblur="if(this.value == '')this.value='Keyword(s)'" onfocus="this.value==this.defaultValue?this.value='':null" value="Keyword(s)" name="keyword">
<a href="#" class="search-btn" data-search="text1 ">search 1</a>
<a href="#" class="search-btn" data-search="intro ">search 2</a>
<a href="#" class="search-reset">reset</a>
およびコードのスニペット:
$(".search-btn").on("click", function(){
$("#searchbox").val( $(this).data("search") );
$('.searchFilter').keyup();
});
$(".search-reset").on("click", function(){
$("#searchbox").val( "");
$('.searchFilter').keyup();
});
私がやりたいのは、「検索1」をクリックして、検索が実行され、関数を呼び出した後に表示されるすべての要素に、「可視要素」と呼ばれるクラスを追加することです。
これは、別の検索プラグインに適用して達成しようとしているものの良い例ですが、私がやろうとしていることの概念を示しています:
$('input#id_search').quicksearch('div.member', {
show: function () {
$(this).addClass('visible-elements');
},
hide: function() {
$(this).removeClass('visible-elements');
},
onAfter: function() {
$container.isotope({ filter: 'visible-elements'});
}
});
問題は、実際の構造でこれを機能させる方法がわからないことです。提案は大歓迎です。
これは実用的なフィドルの例です。
テストサイトはこちら