jQuery UI プラグイン

[jQuery UI] オートコンプリートを実装する(Autocomplete)

投稿日:2018年5月24日 更新日:

jQueryUIのオートコンプリートを使ったサンプルです。

サンプルソース

例)ボタンを押すと使用中のjQueryUIのバージョンをアラート表示する

実行サンプル

「a」と入力するとオートコンプリートに指定したリストが検索されます。

オプション

Autocompleteのオプションには以下のようなものがあります。

【オプション】
オプション意味
sourceリストの一覧を指定(必須)
 例)source:['りんご', ’みかん’, 'ぶどう']
autoFocusリストの初期表示時に1番目を選択状態とするかどうか
 true:する false:しない(デフォルト)
delay入力されてからリストが表示されるまでの時間(ミリ秒) ※デフォルトは300。
 例)1秒にする⇒ delay:1000
disabledオートコンプリートを無効にするかどうか
 true:無効にする false:無効にしない(デフォルト)
minLength検索を開始させる文字数 ※デフォルトは1。
 例)2文字入力された時点でリスト表示する⇒ minLength:2

【イベントオプション】
イベントオプション意味
create:function(event, ui){}オートコンプリートが作成された時
focus:function(event, ui){}リストがフォーカスされた時
change:function(event, ui){}選択値が変更された時
close:function(event, ui){}リストが閉じた時
open:function(event, ui){}リストが開いた時
search:function(event, ui){}検索される直前
response:function(event, ui){}検索された時

解説

  • オプションは上記以外にもあります。

スポンサーリンク

スポンサーリンク

-jQuery UI, プラグイン

執筆者:



comment

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

スポンサーリンク