【Rails】入力した値をajaxを利用してコントローラーに渡したい。

Question

前提・実現したいこと

銀行名と支店名をオートコンプリートを利用して選択できるようなフォームをjquery−uiのautocompleteで実装しようと思っています。

銀行名を入力すると、データベースに登録した名前が表示される仕組みです。

銀行名を選択後、銀行コード（ginkou_code)が<INPUT type="hidden">に入力され、それを利用したSQLで支店名の候補を表示させたいのですが、ajaxを利用して値をコントローラーに渡す方法がわかりません。

#bankcodes table
ID ｜ bank ｜ branch ｜ name  　　｜
   ｜ 0001 ｜ 000    ｜ みずほ 　　｜
   ｜ 0001 ｜ 001    ｜ 東京営業部 ｜
   ｜ 0001 ｜ 005    ｜ 丸の内中央 ｜
   ｜ 0005 ｜ 000    ｜ 三菱ＵＦＪ 　｜
   ｜ 0005 ｜ 001    ｜ 本店 　　　｜
   ｜ 0005 ｜ 003    ｜ 丸の内 　　｜

探し方が悪かったのか、うまく見つけ出すことができませんでした。
どうぞよろしくお願いいたします。

該当のソースコード

#routes.rb
  resources :bankcodes, only:[:bank_auto_complete, :branch_auto_complete] do
    collection do 
      get 'bank_auto_complete'
      get 'branch_auto_complete'
    end
  end

#application_controller.rb
  def bank_auto_complete
    
    bankcodes = Bankcode.select(:name,:bank).where("name like ? AND branch = ?","%#{params[:term]}%" , "000")
    bankcodes = bankcodes.map{|item| {id:"#{item.bank}",val:"#{item.name}"}}
    render json: bankcodes.to_json
    
  end
  
  def branch_auto_complete  

    branchcodes = Bankcode.select(:name,:branch).where("name like ?","%#{params[:term]}%")
    branchcodes = branchcodes.map{|item| {id:"#{item.branch}",val:"#{item.name}"}}
    render json: branchcodes.to_json

  end

#_form.html.erb

    <div class="field">
      <%= form.label "銀行名" %>
      <%= form.text_field :name, id: :bank_name %>
    </div>

    <div class="field">
      <%= form.label :bank_code %>
      <%= form.text_field :bank_code %>
    </div>

    <script>
      $( function() {
        $( "#bank_name" ).autocomplete({
          
          source: "/bankcodes/bank_auto_complete.js",
          minLength: 1,
          focus: function( event, ui ) {
            $( "#bank_name" ).val( ui.item.val );
            $('input[name="bank[bank_code]"]').val(ui.item.id);
            return false;
          },
          select: function( event, ui ) {
            $( "#bank_name" ).val( ui.item.val );
            $('input[name="bank[bank_code]"]').val(ui.item.id);
            return false;
          },
        })
        .autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $( "<li>" )
            .append( "<div>" + item.val + "</div>" )
            .appendTo( ul );
        };
      });
    </script>

    <div class="field">
      <%= form.label "支店名" %>
      <%= form.text_field :name, id: :branch_name %>
    </div>

    <div class="field">
      <%= form.label :branch_code %>
      <%= form.text_field :branch_code %>
    </div>

    <script>
      $( function() {
        $( "#branch_name" ).autocomplete({

          source: "/bankcodes/branch_auto_complete.js",
          minLength: 1,
          focus: function( event, ui ) {
            $( "#branch_name" ).val( ui.item.val );
            $('input[name="bank[branch_code]"]').val(ui.item.id);
            return false;
          },
          select: function( event, ui ) {
            $( "#branch_name" ).val( ui.item.val );
            $('input[name="bank[branch_code]"]').val(ui.item.id);
            return false;
          },
        })
          .autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $( "<li>" )
            .append( "<div>" + item.val + "</div>" )
            .appendTo( ul );
        };
      });
    </script>

補足情報（FW/ツールのバージョンなど）

ruby 2.6.2
rails 5.2.2

Answer 1

Ajaxで動的に値を取得するには下記のような形でできました。

autocomplete.jsを書き換えるや動的に値を取得するといったキーワードで探すことができました。

以下、変更点のみ記載します。

#application_controller.rb

  def branch_auto_complete  

    @bank = params[:bank]

    branchcodes = Bankcode.select(:bank,:name,:branch).where("bank = ? AND name like ? AND branch != ?",@bank,"%#{params[:term]}%",'000')    
    branchcodes = branchcodes.map{|item| {id:"#{item.branch}",val:"#{item.name}"}}
    render json: branchcodes.to_json

  end

#_form.html.erb

    <script>
      $( function() {
        $( "#branch_name" ).autocomplete({
          
          source: function( req, res ) {
            $.ajax({
              url: "/bankcodes/branch_auto_complete.js?",
              dataType: "json",
              data:{
                term: req.term,
                bank: $('input[name="bank[bank_code]"]').val(),
              },
              success: function( data ) {
                res(data);
              }
            });
          },          
          minLength: 1,
          focus: function( event, ui ) {
            $( "#branch_name" ).val( ui.item.val );
            $('input[name="bank[branch_code]"]').val(ui.item.id);
            return false;
          },
          select: function( event, ui ) {
            $( "#branch_name" ).val( ui.item.val );
            $('input[name="bank[branch_code]"]').val(ui.item.id);
            return false;
          },
        })
          .autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $( "<li>" )
            .append( "<div>" + item.val + "</div>" )
            .appendTo( ul );
        };
      });
    </script>