jQuery オートコンプリートで選択された時のイベント

  • このエントリーをはてなブックマークに追加
  • Pocket

jQuery-uiのオートコンプリートを使った時のメモ。

「選択された要素に付随するデータを他のinput要素に表示する」ということをやりたかったけど、どうググればいいのかわからなかったので無理くり実装したやり方をご紹介。

オートコンプリート

お手軽なのはHTML5のautocomplete属性を使えば実装できるけど、もう少し複雑なことができるものがいい。

ということで、jQuery-uiを使う機会が多いかと思う。

jQuery-uiのオートコンプリートを普通にやるとこんな感じ。 オートコンプリート1

選択後はこうなる。

オートコンプリート2

違う、そうじゃない

やりたいこと

  • [ お客様名 ] に会社名
  • [ 担当者名 ] に名前
  • オートコンプリートはお客様名につける
  • 候補の絞り込みは名前でやりたい
  • 選択された時にその人に付随する別のデータを他のinput要素へ反映させたい

要は名前で検索して選択するとその人の電話番号とかメールアドレスを自動でセットする、ということをやりたい。

とりあえず「選択された」イベントと「選択された人」が特定できればなんとでもできるので調べてみるとあっさり見つかった。

実装してみる。 ここまでは一緒。

オートコンプリート1  

「今田 拓さん」を選択後はこれ。

オートコンプリート3

It work’s !

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*