jQueryで絞り込み検索を実装する方法を解説！
jQueryで絞り込み検索を実装する方法をサンプルコード付きで解説します。jQueryで絞り込み検索を実装する方法するには.indexOf()メソッドを用います。では見ていきましょう。
jQueryで絞り込み検索を実装したい
jQueryでリスト一覧からリアルタイムで絞り込み検索を実装したいということがよくあります。
その方法について以下の項目にて解説します。
jQueryで絞り込み検索を実装する方法
jQueryで絞り込み検索を実装する方法として.indexOf()メソッドを用います。
.indexOf()メソッド
以下のコードをサンプルとして記述してみて下さい。
.indexOf()メソッド
const text = 'リンゴイチゴブドウ';
const result = text.indexOf('イチゴ');
console.log(result);この結果コンソールログには「3」が表示されます。
これは「イチゴ」という対象のテキストを0から数えて3文字目にあるためです。
では次に以下のコードを記述してみて下さい。
.indexOf()メソッド
const text = 'リンゴイチゴブドウ';
const result = text.indexOf('Strawberry');
console.log(result);上記では「Strawberry」というキーワードが設定されています。しかし、対象となるテキストの中には含まれていないので検索できません。
このような場合は、実行結果に【-1】が出力されます。
この.indexOf()メソッドの特性を生かして以下ではリストから特定のキーワードを検索してみようと思います。
リストから特定のキーワードを検索する
まずHTMLにて適当なリストを作成します。
そして検索をかけるためにinput要素を記述し、上記で解説した.indexOf()メソッドを用いて、jQueryを記述します。
ではサンプルコードを用意したので確認してみましょう。
上記のように絞り込み検索ができることが分かります。
コード解説
では簡単にJSのコード解説をします。
.indexOf()メソッドを用いてもし検索結果にli要素に記述している内容が引っかかれば、.each()メソッドのコールバック関数を使い、第2引数に格納されるli要素のtextContentプロパティを配列に格納します。
そしたらまたその配列を.each()メソッドを用いて、1つずつ画面上に表示されるようにしています。
まとめ
いかがでしたでしょうか？
ぜひここで紹介した方法を用いて、jQueryで絞り込み検索を実装してみて下さい。
