jQuery UI のautocomplete機能

入力リストの候補を表示する時、通常の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", "");
        });

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