jQueryUIのautocompleteをフォームクリックで表示する

harada 159views 更新:2017年1月24日

通常の記述だと下カーソルか、何か入力した際にしか表示されないのですが、フォームをクリックするだけで候補リストを出したいとおもい調べたところ以下の方法でできました。

            var stationsList = [
              '東京駅',
              '上野駅',
              '品川駅',
            ];
            jQuery('#IDを入力').autocomplete({
              minLength : 0,
              delay : 0,
              source: function(request, response) {
                response(
                  jQuery.grep(stationsList, function(value){
                    return value.indexOf(request.term) === 0;
                  })
                );
              },
              select : function(event, ui) {
                jQuery('#IDを入力').val(ui.item.name)
              }
            }).focus(function() {
              jQuery(this).autocomplete("search", "");
            })

参考:オートコンプリートでフォーカスが入ったらすぐに候補を出したいんだ。
入力もできるし選択もできるUIを作る(autocomplete、typeahead、コンボボックス)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません