jQuery UI Autocompleteのサンプル

Tech

jQuery UIを使って、Autocompleteのサンプルを作ってみた。

jQuery UIは、以下よりダウンロードします。

まずはサーバとの通信を必要としない単純な形(HTMLファイル内にデータがある場合)だとこんな感じ。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery UI Autocomplete sample 1</title>
	<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
	<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui-1.8.5.custom.min.js"></script>
</head>
<body>
	<h1>jQuery UI Autocomplete sample 1</h1>
	<script type="text/javascript">
		$(function() {
			var availableArtists = [
				"Annihilator",
				"Anthrax",
				"Dark Angel",
				"Death Angel",
				"Destruction",
				"Evile",
				"Exodus",
				"Forbidden",
				"Hatesphere",
				"Kreator",
				"Megadeth",
				"Metallica",
				"Nuclear Assault",
				"Outrage",
				"Overkill",
				"Possessed",
				"Raven",
				"Ritual Carnage",
				"S.O.D.",
				"Sepultura",
				"Slayer",
				"Sodom",
				"Suicidal Tendencies",
				"Terror 2000",
				"Testament",
				"The Haunted",
				"Venom",
				"Voivod"
			];
			$("#artists").autocomplete({source: availableArtists})
				.autocomplete('option', 'minLength', 2);
		});
	</script>
	<div class="sample">
		<div class="ui-widget">
			<label for="artists">アーティスト名: </label>
			<input id="artists">
		</div>
	</div>
</body>
</html>

次にサーバとの通信を行ってデータを動的に取得する場合は、以下のようにAPIを呼び出します。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery UI Autocomplete sample 2</title>
	<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
	<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui-1.8.5.custom.min.js"></script>
</head>
<body>
	<h1>jQuery UI Autocomplete sample 2</h1>
	<script type="text/javascript">
		$(function() {
			$('#artists').autocomplete({source : 'http://localhost:8888/search_artists.php'})
				.autocomplete('option', 'minLength', 2);
		});
	</script>
	<div class="sample">
		<div class="ui-widget">
			<label for="artists">アーティスト名: </label>
			<input id="artists">
		</div>
	</div>
</body>
</html>

呼び出されるAPI(PHPプログラム)は、配列内のデータを検索して該当するデータを返しているだけです。

<?php 
	$term = $_GET['term'];
	$artists = array(
		"Annihilator",
		"Anthrax",
		"Dark Angel",
		"Death Angel",
		"Destruction",
		"Evile",
		"Exodus",
		"Forbidden",
		"Hatesphere",
		"Kreator",
		"Megadeth",
		"Metallica",
		"Nuclear Assault",
		"Outrage",
		"Overkill",
		"Possessed",
		"Raven",
		"Ritual Carnage",
		"S.O.D.",
		"Sepultura",
		"Slayer",
		"Sodom",
		"Suicidal Tendencies",
		"Terror 2000",
		"Testament",
		"The Haunted",
		"Venom",
		"Voivod"
	);
	$data = array();
	if (!empty($term)) {
		foreach ($artists as $artist) {
			if (strpos(strtolower($artist), strtolower($term)) !== false) {
				$data[] = $artist;
			}
		}
	} else {
		$data = $artists;
	}
	echo json_encode($data);

Firebugなどで見れると、タグが追加されているのが分かる。