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

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

関連記事

[jQuery UI] ドロップを実装する(Droppable)

jQueryUIでドロップを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったドロップのサンプル [ ...

[jQuery UI] 日付入力欄を実装する(Datepicker)

jQueryUIで日付入力欄を実装するには、Datepickerを使用します。 サンプルソース 例1)デートピッカーサン ...

[jQuery UI] ドラッグを実装する(Draggable)

jQueryUIでドラッグを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったドラッグのサンプル [ ...

[Plugin] アニメーションでページトップに戻るボタンを実装する(jQuery Scroll to Top Control)

アニメーションでページトップに戻るボタンを実装するには、 「jQuery Scroll to Top Control」と ...

[jQuery UI] ツールチップを実装する(Tooltip)

jQueryUIでツールチップを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったツールチップのサン ...

スポンサーリンク