インクリメンタルサーチの実装手順について

背景

インクリメンタルサーチの実装に手こずったため備忘録を残したく、書いた。

手順

1.API側の準備。(ルーティング、アクション、jbuilderファイル作成、記述)
※API="何か"と"何か"をつなぐもの

2.テキストフィールド作成

3.jsファイルを作成し、テキストフィールドに入力されるたびにイベント発火する処理を記述。
[例]

users.js

$(function() {
  $("テキストフィールドのセレクタ").on("keyup", function() {
    var input = $("テキストフィールドのセレクタ").val();
  });
});

4.イベント時に非同期通信が出来るようにする。
[例]

users.js

$.ajax({
  type: "GET",
  url: "/users",
  data: { keyword: input },
  dataType: "json"
})

5.非同期通信の結果を得て、HTMLを作成。

6.エラー時の処理を記述。

[記述例]

users.js

$(function() {
// 該当ありの場合に発動させる関数
  function addUser(user) {
    let html = `
    追加したいHTMLを記述する。(クラス名はscssに対応したやつor新たに作る)
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">${user.name}</p>
        <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${user.id}" data-user-name="${user.name}">追加</div>
      </div>
    `;
    $("#user-search-result").append(html);
  }

// 該当なしの場合に発動させる関数
  function addNoUser() {
    let html = `
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">ユーザーが見つかりません</p>
      </div>
    `;
    $("#user-search-result").append(html);
  }

// テキストフィールドに入力される度にイベント発火
  $("#user-search-field").on("keyup", function() {
// 入力された内容を変数に入れる
    let input = $("#user-search-field").val();
// 非同期通信の記述
    $.ajax({
      type: "GET",
      url: "/users",
      data: { keyword: input },
      dataType: "json"
    })
      // 成功した場合
      .done(function(users) {
      // 表示していた一覧の中身削除
        $("#user-search-result").empty();
      // 文字が入力された場合に該当ユーザーを表示する関数使用
        if (users.length !== 0) {
          users.forEach(function(user) {
            addUser(user);
          });
      // 文字が入力されていない場合は何も表示しない
        } else if (input.length == 0) {
          return false;
      // そのほかの場合、見つかりませんと表示する関数を使用
        } else {
          addNoUser();
        }
      })
      // 失敗した場合
      .fail(function() {
        alert("通信エラーです。ユーザーが表示できません。");
      });
  });
});