前提・実現したいこと
銀行名と支店名をオートコンプリートを利用して選択できるようなフォームをjquery−uiのautocompleteで実装しようと思っています。
銀行名を入力すると、データベースに登録した名前が表示される仕組みです。
銀行名を選択後、銀行コード(ginkou_code)が<INPUT type="hidden">に入力され、それを利用したSQLで支店名の候補を表示させたいのですが、ajaxを利用して値をコントローラーに渡す方法がわかりません。
#bankcodes table ID | bank | branch | name | | 0001 | 000 | みずほ | | 0001 | 001 | 東京営業部 | | 0001 | 005 | 丸の内中央 | | 0005 | 000 | 三菱UFJ | | 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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。