JavaScript
HTML5
jQuery

HTML5/JSでインスタントサーチ(入力中に検索結果表示)

More than 3 years have passed since last update.

Angular JSとかで、入力するたびに検索結果が表示されるテキストボックスってありますよね?あれをどう実装するかについて、簡単なチュートリアルを紹介します。


  • テキスト入力されるたびにinputイベントで内容を取得


  • querySelectorAll()で検索対象を取得(できればDOMをキャッシュ)


  • display:none;をトグルする


> Demo Page

zlPIdU5CCS.gif


1. HTML

まず、単純なテキストボックスを設置します。


<input id="input_search" type="text" placeholder="Search by Display Name"/>


2. CSS

単純に、display: none;のクラス名をトグルするため、そのためのクラス名を定義します


.hidden {
display: none;
}


3. JS: インスタントサーチのスクリプト

この節がいちばんの肝です。


  • まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します

  • 次に、for文内でinnnerTextでタグ内の文字列を取得します

  • 最後に、.hiddenクラスをトグルします


searchUsersList = function(event){
var
i,
id,
name,
lists,
input_text = $(this).val();
console.log(input_text);

// listのdomを取得
lists = document.querySelectorAll('.line-shell-main-users-li');

for (i = 0; i < lists.length; i++){
id = lists[i].id;
// innerTextでタグ内の文字列を取得します
name = lists[i].innerText;
// display: none; のクラス名をトグルします
if (!name.includes(input_text)){
$('#' + id).addClass('hidden');
} else {
$('#' + id).removeClass('hidden');
}
}
};


4. jQuery: イベントハンドラーを設定

jQueryの.on()メソッドでinputイベントを設定します。inputイベントでは、テキストが変更・入力されるたびにフォーム内の値を取得することができます。とても便利なイベントです。


$('#input_search').on('input', searchUsersList);