jQuery UI のautocomplete機能

ysugiyama12 67views 更新:2017年2月6日

入力リストの候補を表示する時、通常のdatalistだとスマホなどでうまく表示できない場合があるので、かわりにjQuery UI のautocomplete機能を導入した。 下に一例を示す。

var list = [];
list.push('Apple');
list.push('Orange');
list.push('Banana');

 jQuery('[id^=title1_]').autocomplete({
          minLength: 0,
          delay: 0,
          source: function (request, response) {
            response(
              jQuery.grep(list, function (value) {
                return value.indexOf(request.term) === 0;
              })
            );
          },
          select: function (event, ui) {
            jQuery(this).val(ui.item.name)
          }
        }).focus(function () {
          jQuery(this).autocomplete("search", "");
        });

このように書くことでクリックした時に先にリスト化した文字列を候補として表示することができる。

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

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

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