【ajax】jquery-ui-rails,ajaxでオートコンプリート機能を実装

#オートコンプリートについて
オート（自動）コンプリート（完全）
検索バー等でよくある入力の自動補完です。
ajaxで非同期通信を行い、入力の1文字目をサーバーに送信し、予測される選択肢がテキストボックスの下に表示されるよう実装していく。

#jQueryの導入

gem 'jquery-rails'
gem 'jquery-ui-rails'

gemfileに追加し、bundle install

application.js

//= require jquery
//= require rails-ujs
//= require jquery-ui
//= require_self
//= require_tree .

application.css

  *= require jquery-ui

それぞれ追加する。
このrequireの部分は、書く上下の順番によってもうまく読み込まれるかが変わってくるので、色々と試した。
#HTMLのinputタグにidを設定

_header.html.erb

<span class="input-group">
  <input type="text" name="search" class="form-control" id="form" placeholder="Search…" >
  
  <span onclick="FormSubmit();" class="input-group-search">検索</span>
</span>

**id="form"**を設定

#JavaScript

suggest.js

$("#form").autocomplete ({//①
  source: function (req, resp) {
    $.ajax({//ここから下がajaxの処理
      url: '/suggest',
      type: 'GET',
      dataType: "json",
      data: { keyword: req.term },//②
      success: function(o){
        resp(o);
      },
      error: function(xhr, ts, err){//③
      resp(['']);
      }
    });
  }
});


$('.dropdown').change(function () {//④
  $(this).addClass('open');
});

①　id名formが設定された箇所にautocompleteを実装していく
②　req.termとすることで、入力値をサーバーに送る事ができる。
③　ajaxのリクエスト失敗時には、そのエラーに関する情報を3つの引数で受け取る。その内容を取得する方法は、こちらの記事で確認する事ができた。【jQuery】Ajaxのエラーレスポンスをパースする方法
④dropdownクラスの要素内に変更があった場合に、openクラスを追加する事で、選択肢をクリックした後もフォームが消えないようにする事ができた。

custom.js

jQuery(document).ready(function () {
  $('.dropdown,.ui-autocomplete').hover(//⑤
    function () {
      $(this).addClass('open');
    },
    function () {
      if (!$(this).hasClass('not-remove')){//⑥
        $(this).removeClass('open');
      };
    });
});

⑤jQueryのhoverメソッド： 対象要素.hover( 関数１, 関数２ ) という書き方をする。
参考:jQueryのhover()を活用したマウス操作まとめ！
⑥検索バーの、ドロップダウンを設定している要素に、not-removeクラスがついていない場合（ifの否定文）のみ実行する事で、検索バーから選択肢へマウスカーソルを移動させて選択できるようにした。

#ルーティング

route.rb

get 'suggest',   to: 'suggests#search'

#コントローラー

suggests_controller.rb

class SuggestsController < ApplicationController
  SUGGEST_MAX_COUNT = 5
  def search
    api_suggest = ApiSuggest.new
    @suggests = api_suggest.suggest(params[:keyword], SUGGEST_MAX_COUNT)
    respond_to do |format|
      format.json { render suggest_path, json: @suggests }
    end
  end
end

サーバー側の実装については、今後gemのGrapeを導入し、API等を作成していく中で更に詳しく記録していく予定です、、

#終わりに
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございます。