下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。

検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。

部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。

設定したスクリプトはこちらです。

searchWord = function(){
  var searchResult,
      searchText = $(this).val(), // 検索ボックスに入力された値
      targetText,
      hitNum;

  // 検索結果を格納するための配列を用意
  searchResult = [];

  // 検索結果エリアの表示を空にする
  $('#search-result__list').empty();
  $('.search-result__hit-num').empty();

  // 検索ボックスに値が入ってる場合
  if (searchText != '') {
    $('.target-area li').each(function() {
      targetText = $(this).text();

      // 検索対象となるリストに入力された文字列が存在するかどうかを判断
      if (targetText.indexOf(searchText) != -1) {
        // 存在する場合はそのリストのテキストを用意した配列に格納
        searchResult.push(targetText);
      }
    });

    // 検索結果をページに出力
    for (var i = 0; i < searchResult.length; i ++) {
      $('<span>').text(searchResult[i]).appendTo('#search-result__list');
    }

    // ヒットの件数をページに出力
    hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
    $('.search-result__hit-num').append(hitNum);
  }
};

// searchWordの実行
$('#search-text').on('input', searchWord);

実装のポイントは下記の2点です。

indexOfを使って文字列内に指定した文字列が存在するか調べる

今回の検索条件は部分一致でしたので、indexOfメソッドを使用して文字列が存在するかを調べました。
文字列が見つからなければ-1が返されることを利用します。

if ( str.indexOf('hoge') != -1) {
  //strにhogeを含む場合の処理
}

.on()で検索ボックスの値をリアルタイムに取得

.on()メソッドでinputイベントを設定することによって、テキストが変更・入力されるたびに検索ボックス内の値をリアルタイムに取得することができます。

  // searchWordの実行
  $('#search-text').on('input', searchWord);

上記のようにすることで、#search-textというテキストボックスにテキストが変更・入力されるたびに関数searchWordが実行されるようになります。

さらにアレンジ

最初にご紹介した方法は、部分一致したリストを取得して別のエリアに表示させる方法でした。
今度は検索結果を別のエリアに表示させるのではなく、部分一致したリストを検索対象エリアに残す（＝部分一致しないリストを非表示にする）ように実装してみます。

例えば検索ボックスに“5”と入力してみてください。“5”を含む『みかん150円』と『すいか500円』が検索対象エリアに残り、それ以外のリストが非表示になります。

参考サイト

• 【JavaScript】～を含むかのチェック
• [ Javascript ] 文字列内に指定した文字列が存在するか調べる
• HTML5/JSでインスタントサーチ（入力中に検索結果表示）