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] トグルボタンを実装する(Button)

jQueryUIでトグルボタンを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったトグルボタンサンプ ...

[jqGrid] 指定した行を選択/選択解除する

jqGridで指定した行を選択/選択解除するサンプルです サンプルソース 例)2行目を選択/選択解除する [crayon ...

[jQueryUI] jQueryUIのバージョンを取得する($.ui.version)

jQueryUIのバージョンを取得するには、$.ui.versionを使用します。 構文 (jQueryUIのバージョン ...

[jqGrid] 指定したセルの値を書き換える

jqGridで指定したセルの値を書き換えるするサンプルです サンプルソース 例)2行目の金額列の値を99999に書き換え ...

[jQuery UI] ソートを実装する(Sort)

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

スポンサーリンク