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

jQuery UI の autocomplete を利用すると、入力候補リストを表示して入力を補助する オートコンプリート機能 を実装することができます。
今回は、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 には、以下のようなオプションがあります。

▲目次へ戻る

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

▲目次へ戻る

4. まとめ

jQuery UI の autocomplete について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る