jQuery UI オートコンプリートのサンプル(autocomplete)

jQuery UIのオートコンプリートのサンプルです。
Autocomplete Widgetを使用します。

目次

Autocomplete Widget

  • jQuery UIのライブラリです。
  • テキストボックスに文字を入れると入力文字の候補が表示されます。
  • jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
  • 以下はjQuery UIのAutocomplete Widgetのリンクです。
    http://api.jqueryui.com/autocomplete/

オートコンプリートのサンプル

オートコンプリートのサンプルです。
テキストボックスにaと入力すると入力文字の候補が表示されます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<label for="label1">文字を入力して下さい: </label>
<input type="text" id="input10" maxlength="5">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	const arr1 = ["abc1","abc2","abc3"];

	// オートコンプリート
	$("#input10").autocomplete({
		source:arr1
	});
});
</script>

10行目は、入力候補になる配列をセットしています。
13行目のautocompleteでオートコンプリートを行います。
14行目のsourceは、10行目の配列を指定しています。

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery UI カレンダーから日付を入力するサンプル(datepicker)
jQuery UI ダイアログを開くサンプル(Dialog)
jQuery UI タブのサンプル(tabs)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI 要素をドラッグ・アンド・ドロップする(draggable/droppable)

△上に戻る