jQuery【 jQuery UI 】autocomplete を使用してオートコンプリート機能を実装

jQuery UI の autocomplete を利用すると、入力候補リストを表示して入力を補助する オートコンプリート機能 を実装することができます。
今回は、autocomplete の使用方法について紹介します。

目次

１．autocomplete を使用してテキストボックスを作成
２．autocomplete のオプション
３．autocomplete を使用してコンボボックスを作成

１．autocomplete を使用してテキストボックスを作成

　
jQuery UI の autocomplete を使用して テキストボックスを作成します。
星座名の中の一文字をひらがなで入力してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function(){
  var seiza = [
    "おひつじ座",
    "おうし座",
    "ふたご座",
    "かに座",
    "しし座",
    "おとめ座",
    "てんびん座",
    "さそり座",
    "いて座",
    "やぎ座",
    "みずがめ座",
    "うお座"
  ];
  $("#wkText").autocomplete({
    source:seiza
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  星座名の中の一文字をひらがなで入力して下さい！
  <input id="wkText">
</div>

input 要素を指定して autocomplete を呼び出し、autocomplete の source オプションにオートコンプリートとして表示する文字列のリストを設定します。

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

▲目次へ戻る

　

２．autocomplete のオプション

　
上のサンプルで オプション「 source 」を設定していますが、autocomplete には、以下のようなオプションがあります。

appendTo	リストメニューの要素をどの要素内に挿入するかを指定 スクロールした際にポップアップメニュー位置が固定されてしまうため、オートコンプリートが「position:fixed」の要素内にある場合はこれを上書きする 初期値：”body”
autoFocus	メニューが開いた際に最初の項目を選択状態にするかどうかを指定 初期値：false
collapsible	すべてのパネルが折りたためるようにするか否かを指定 「true」を指定すると、アクティブなパネルを折りたためるようになる 初期値：false
delay	キーストロークされてから リストメニューの検索が実行されるまでの遅延時間をミリ秒単位で指定 リモートデータを取り扱う場合は サーバへの負荷を考慮する必要がある 初期値：300
event	アコーディオンの見出しが反応してパネルを展開する際のイベントを指定 イベント名を半角スペース区切りで複数指定することができる 初期値：”click”
disabled	オートコンプリート機能を無効化するか否かを指定 初期値：false
minLength	リストメニューの検索が実行されるのに必要な入力文字列の最小値を指定 初期値：1
position	input 要素に対するリストメニューの位置を指定 初期値：{my:”left top”, at:”left bottom”, collision:”none” }
source	使用するデータを指定（必ず記述が必要なオプション） リストメニューのラベルは全てテキストとして扱われる 初期値：無し(入力必須)

▲目次へ戻る

　

３．autocomplete を使用してコンボボックスを作成

　
jQuery UI の autocomplete を使用して コンボボックスを作成することもできます。
星座名の中の一文字をひらがなで入力してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#wkCombo").combobox();

  $("#toggle").click(function() {
    $("#wkCombo").toggle();
  });
});

(function($) {
  $.widget("custom.combobox", {
    _create: function() {
      this.wrapper = $("<span>")
      .addClass("custom-combobox")
      .insertAfter(this.element);
      
      this.element.hide();
      this._createAutocomplete();
      this._createShowAllButton();
    },
      
    _createAutocomplete: function() {
      var selected = this.element.children(":selected"),
      value = selected.val() ? selected.text() : "";
      
      this.input = $("<input>")
        .appendTo(this.wrapper)
        .val(value)
        .attr("title", "")
        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
        .autocomplete({
          delay: 0,
          minLength: 0,
          source: $.proxy(this, "_source")
        })
        .tooltip({
          tooltipClass: "ui-state-highlight"
        });        
      
      this._on(this.input, {
        autocompleteselect: function(event, ui) {
          ui.item.option.selected = true;
          this._trigger("select", event, {
            item: ui.item.option
          });
        },
        
        autocompletechange: "_removeIfInvalid"
      });
    },
    
    _createShowAllButton: function() {
      var input = this.input,
      wasOpen = false;
      
      $("<a>")
        .attr("tabIndex", -1)
        .attr("title", "Show All Items")
        .tooltip()
        .appendTo(this.wrapper)
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass("ui-corner-all")
        .addClass("custom-combobox-toggle ui-corner-right")
        .mousedown(function() {
          wasOpen = input.autocomplete("widget").is(":visible");
        })
        .click(function() {
          input.focus();
          
          // 候補一覧表示時は非表示
          if (wasOpen) {
            return;
          }
          
          // リストを全て表示（入力値は空欄）
          input.autocomplete("search", "");
        });
    },
      
    
    _source: function(request, response) {
      var matcher = new RegExp("[" + $.ui.autocomplete.escapeRegex(request.term) + "]", "i"); //部分一致
      response(this.element.children("option").map(function() {
        var text = $(this).text(); 
        var value = $(this).val();
        if (this.value && (!request.term || matcher.test(value))) //マッチ
        return {
          label: text, //候補表示名
          value: value,
          option: this
        };
      }));
    },
      
    _removeIfInvalid: function(event, ui) {
      
      // 未選択時はreturn
      if (ui.item) {
        return;
      }      
      
      // 候補を検索
      var value = this.input.val(),
      valid = false;
      
      //　結果をreturn
      if (valid) {
        return;
      }
    },
    
    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });
})(jQuery);
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <div class="ui-widget">
    星座を選択して下さい
    <select name="name" id="wkCombo">
      <option value="" selected>選択してください</option>
      <option value="おひつじ座">おひつじ座</option>
      <option value="おうし座">おうし座</option>
      <option value="ふたご座">ふたご座</option>
      <option value="かに座">かに座</option>
      <option value="しし座">しし座</option>
      <option value="おとめ座">おとめ座</option>
      <option value="てんびん座">てんびん座</option>
      <option value="さそり座">さそり座</option>
      <option value="いて座">いて座</option>
      <option value="やぎ座">やぎ座</option>
      <option value="みずがめ座">みずがめ座</option>
      <option value="うお座">うお座</option>
    </select>
  </div>
</div>

JavaScript のコードが長くなりますが、「 _source: function(request, response) 」内で選択候補の値を選別しています。
色々と加工して試してみて下さい。

▲目次へ戻る