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/

サンプル

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

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>autocompleteのサンプル</title>
<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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script>
$(function() {
	var arr1 = ['abc1','abc2','abc3'];

	// オートコンプリート
	$('#t1').autocomplete({
		source:arr1
	});
});
</script>
</head>
<body >
<label for="t1">文字を入力して下さい: </label>
<input type="text" id="t1" maxlength="5">
</body>
</html>

関連の記事

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




△上に戻る