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

colmun_main10606

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

目次

 
1.autocomplete を使用してテキストボックスを作成
2.autocomplete のオプション
3.autocomplete を使用してコンボボックスを作成

1.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 の導入と使用方法をご参照下さい。

▲目次へ戻る

 

2.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 使用するデータを指定(必ず記述が必要なオプション)
リストメニューのラベルは全てテキストとして扱われる
初期値:無し(入力必須)

▲目次へ戻る

 

3.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) 」内で選択候補の値を選別しています。
色々と加工して試してみて下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です