column

ITコラム

mv10606

プログラミングノウハウ

2018.06.20

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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(){
  const 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() {
      let 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() {
      let 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) {
      let matcher = new RegExp("[" + $.ui.autocomplete.escapeRegex(request.term) + "]", "i"); //部分一致
      response(this.element.children("option").map(function() {
        let text = $(this).text(); 
        let 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;
      }      
      
      // 候補を検索
      let 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プログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

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

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ