JqueryUI Autocomplete ComboboxでAJAXを利用した場合の設定方法について

Question

JqueryUIのAutocomplete ComboboxをAjaxを利用して設定したいと思っています。
フォームでの利用を考えており、文字入力、候補表示。送信時には、候補に紐付いた銀行コード、支店コードを受け渡したいです。

これまではJqueryUIのAutocompleteを利用して、hiddenフィールドにいたのですが、候補を選択しないと設定されないためコンボボックスに変更しようと考えました。

公式サイトに記載されている形であればわかるのですが、AJAXを組み合わせたときにサンプルコードのようなものがなくうまく設定できません。
http://jqueryui.com/autocomplete/#combobox

アドバイスやサンプルなどの情報でもご教授いただけると助かります。

なおAPIは下記のようになっています。

API（例：mで検索）
http://localhost:3000/search/bank_codes?query=m
⇒[{"code":"0001","name":"みずほ"},{"code":"0005","name":"三菱ＵＦＪ"}....]

どうぞよろしくお願いいたします。

追記（これで解決しました。）

Jqueryを利用して、ComboboxでAJAXを利用するならselect2のほうがコードもわかりやすく実装が簡単でしたので、選択肢の1つにいれてみてください。

https://select2.org/

Answer 1

ドキュメントによれば、source に文字列が指定された場合、それを JSON データを返す URL とみなします。
入力は query ではなく term 、ラベルと入力値を別のものにする場合は label , value と書かれています。

input.autocomplete({
  source: 'http://localhost:3000/search/m_bank_codes'
});

[{"value":"0001","label":"みずほ"},{"value":"0005","label":"三菱ＵＦＪ"}]

http://api.jqueryui.com/autocomplete/#option-source

Comments

[no1knows]

ありがとうございます。せっかくアドバイス頂いたのですが、うまく実装ができませんでした。
調べている最中に見つけたselect2がAjaxの設定が非常にやりやすかったので、そちらで実装することができました。
調べていただいたことをきっかけにselect2を見つけることができたので、ベストアンサーに選ばせていただきます。