クルーデザイン

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 クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

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

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

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

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

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

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

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

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


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

comment

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