オートコンプリート

入力の下にオートコンプリートのドロップダウンを追加して、フォームで考えられる値を示します。オートコンプリートオプションのリストを動的に作成することもできます。

オートコンプリート


  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

dataはjsonオブジェクトです。keyはマッチする文字列で、valueはオプションのイメージのurlです。


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

名前	タイプ	既定値	説明
data	オブジェクト	{}	オプションアイコンの文字列を含むオートコンプリートオプションを定義するデータオブジェクト。
limit	数字	Infinity	オートコンプリートに表示する結果の制限。
onAutocomplete	関数	null	オートコンプリート時のコールバック。
minLength	数字	1	オートコンプリートが開始する前に必要な最少文字数。
sortFunction	関数		オートコンプリートオプションのリストの並び順を定義するソート関数。

sortFunction

これは既定のcompareFunctionです。同じ3つのパラメータを持つ関数で独自のcompareFunctionを書くことができます。compareFunctionの仕組みについては、ここで詳しく読むことができます。


  // Sort function for sorting autocomplete results
  function (a, b, inputString) {
    return a.indexOf(inputString) - b.indexOf(inputString);
  }

ソートを無効にしてデータオブジェクトに表示される値を使用するには、偽の値を使用します。

jQueryが依存関係ではなくなったため、すべてのメソッドはプラグインインスタンスに対して呼び出されます。プラグインインスタンスは次のように取得できます。
  var instance = M.Autocomplete.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.autocomplete').autocomplete('methodName');
    $('.autocomplete').autocomplete('methodName', paramName);
  */
        

.open();

オートコンプリートのドロップダウンを開きます。


instance.open();

.close();

オートコンプリートのドロップダウンを閉じます。


instance.close();

.selectOption();

特定のオートコンプリートオプションを選択します。

引数

要素：オートコンプリートオプションの要素。


instance.selectOption(el);

.updateData();

オートコンプリートオプションのデータを更新します。

引数

オブジェクト：オートコンプリートオプションのデータオブジェクト。


instance.updateData({
  "Apple": null,
  "Microsoft": null,
  "Google": 'https://placehold.it/250x250'
});

.destroy();

プラグインインスタンスを破棄して終了します


instance.destroy();

名前	タイプ	説明
el	要素	プラグインが初期化されたDOM要素。
options	オブジェクト	インスタンスが初期化されたオプション。
isOpen	ブール値	オートコンプリートが開いているかどうか。
count	数字	マッチするオートコンプリートオプションのの数。
activeIndex	整数	現在選択されているオプションのインデックス。
dropdown	ドロップダウン	このオートコンプリートのドロップダウンプラグインのインスタンス。

導入
初期化
オプション
メソッド
プロパティ

初期化

オプション