クルーデザイン

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 ブロックレベル要素をリンクにしたい(aタグで囲まない)

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

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

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

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …

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

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


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

comment

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