クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery 絞り込み検索サンプル(正規表現)

投稿日:2017年12月3日 更新日:

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。
絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。
以下のようなイメージですね。

上記のテキストボックスに入力した内容によって、リアルタイムに下側のリストが絞り込まれていく機能です。
キーを打つ毎に絞り込まれていく内容が変化するので、とても格好いいですよ!

サンプルも作っていますので、良ければ見てくださいね。
色々なものに応用できると思います。

HTML(jQuery 絞り込み検索サンプル(正規表現))

[ 4行目 ]
テキストボックスを用意します。
jQueryで操作するために「search__text」というクラス名を付けておきましょう。

[ 9〜23行目 ]
絞り込む対象リストを記述しています。
これも目印として「target」というクラスを付けておきます。

スクリプト側(jQuery 絞り込み検索サンプル(正規表現))

少し難しいと思うかもしれませんが、1つずつ見ていくと理解できると思います。

[ 3行目 ]
テキストボックスでキー入力された時に実行される処理を記述します。
「keyup」はキーが押された後、離された瞬間に実行されるイベントです。

[ 5行目 ]
テキストボックスに入力された内容を変数に保存します。

[ 7行目 ]
「target」クラス以下の「li」をすべて取得して「each関数」で1つずつループさせています。
「li」には「white」「black」などのテキストが入っています。

[ 8行目 ]
「li」内のテキスト「white」「black」などを変数に保存します。

[ 9〜13行目 ]
テキストボックスに入力された文字とli内のテキストを「match」関数で比較しています。
一致の場合は「li」を「show」関数で表示します。
不一致の場合「li」を「hide」関数で非表示にします。

これでリアルタイムに動作する絞り込み検索機能が完成しました。
色々と応用できますので、是非理解してくださいね。

サンプルも参考にしてくださいね。

-jQuery

執筆者:

関連記事

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery ローカルストレージ で入力値の保存と読み込みをする

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …


  1. […]  clue-design.comjQuery 絞り込み検索サンプル(正規表現) | クルーデザインhttp://clue-design.com/jquery/jquery-refine-seikijQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検 […]

comment

メールアドレスが公開されることはありません。