インクリメンタルサーチについての復習 #JavaScript

インクリメンタルサーチの復習

Ajaxの非同期通信を学習中で、前回はコメントの投稿をページの再読み込みなしで表示させました。
今回は文字を入力して検索する際、検索ボタンを押して再読み込みをさせずに非同期で検索結果を表示させるようにします。

インクリメンタルサーチとは

そもそもインクリメンタルサーチとは、
Incremental Search
Incremental : 増加、増大する、追加する
Search : 検索
と単語の意味で考えると正直分かりませんが、IT用語で「文字入力するたびに自動的に検索が行われる検索方法」を指します。

インクリメンタルサーチの実装

インクリメンタルサーチ実装の流れを復習していきます。
あくまでAjax、JavaScriptの流れを把握することが目的なので、HTMLなどの表記はある程度省略していきます。

search.js

$(function() {
  $(".search__form").on("keyup", function(){

    var input = $(".search__form").val();

    $.ajax({
      type: 'GET',
      url: '/products/search',
      data: { keyword: input },
      dataType: 'json'
    })

    .done(function(products) {
      $(".検索結果表示クラス").empty();
      if (products.length !==0) {
        $(".検索結果表示クラス").append("インクリメンタルサーチの結果を表示させる記述");
      }
      else {
        $(".検索結果表示クラス").append("検索結果がない旨を表示させる記述"）;
      }
    })
    .fail(function(){
      alert('映画検索に失敗しました');
    })

全体的な記述は上記のようになると思います。
細かい内容をおさらいしていきます。

$(".search__form").on("keyup", function(){

keyupイベントはキーボードのキーが上がった時に発火します。文字入力でキーを離したタイミングですね。
イベントの発火を検知する場所は、ここでは"search__form"クラスを持つ検索フォームが指定されています。

    var input = $(".search__form").val();

検索フォームに入力されている値をinputに代入します。

    $.ajax({
      type: 'GET',
      url: '/products/search',
      data: { keyword: input },
      dataType: 'json'
    })

Ajaxで非同期通信を行う際に指定する内容を記述します。
URL、data内のkey名（keyword）はルーティングやインスタンス変数の定義により変わるので一例です。
今回の記述では、{ keyword: input }データを/products/searchパスにGETメソッドで送り、結果をJSON形式で返してもらいます。

    .done(function(products) {
      $(".検索結果表示クラス").empty();
      if (products.length !==0) {
        $(".検索結果表示クラス").append("インクリメンタルサーチの結果を表示させる記述");
      }
      else {
        "検索結果がない旨を表示させる記述";
      }
    })
    .fail(function(){
      alert('映画検索に失敗しました');
    })

.doneメソッドと.failメソッドは対で記述しておきましょう。そして.failメソッドはalertで「エラーが発生しました」と表示される程度でいいかと思います。

今回の.doneメソッドでは、まず検索結果をproductsに代入します。
現在表示されている検索結果をemptyメソッドで消去します。
emptyメソッドは、その要素そのものではなく子要素を削除します。これで検索結果を表示させる箱は残しながら、中身を全て消してリセットしてしまいます。その後検索結果をリセットされた中身に追加して表示させるようにします。

ifを使って場合分けを行います。検索結果の個数が0でなければその結果を表示させ、検索結果の個数が0の場合は検索結果がない旨の記述が適用されます。

結果

検索フォームに文字入力をすると、キーから指を離すたびにフォーム内の文字列が拾われて都度その文字列で検索をかけられます。
文字を入力する度に検索が実行されているわけですから、PC本体やネット回線のスペックがそれなりにないと負荷がすごいことになりそうですね。
ブロードバンドが普及する前にインクリメンタルサーチが使われていたら、どうなっていたのでしょうか？

JavaScript(jQuery)の書き方にはまだ慣れませんが、書いている中身はなんとなく分かってきた気がします。一気に書くとさっぱり分かりませんが、一つ一つ読み解きながら進めていくとどうにか分かるようになってきました。