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] ソートを実装する(Sort)

jQueryUIで、リストをソートするサンプルです。 サンプルソース 例)jQuery UIでリストからソートするサンプ ...

[jQuery UI] テーマの一覧

jQuery UIの各テーマのイメージをまとめてみました。 テーマの一覧とサンプル ※Datepickerのイメージです ...

[jQuery UI] リサイズを実装する(Resizable)

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

[jQuery UI] アニメーションの一覧

jQueryUIで使えるアニメーションの一覧です。 サンプルソース 例)jQuery UIのアニメーションをを確認するサ ...

[jQuery UI] ダイアログを実装する(Dialog)

jQueryUIでダイアログを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったダイアログのサンプル ...

スポンサーリンク