JavaScriptメモ jQuery IUを使ってinputタグに入力の候補を表示してみる

2013/05/23JavaScript,プログラミング

html5に対応してるブラウザだとJavaScriptを使わなくてもできるんだけど、IE6とかIE8は未対応。
。
IE6とかIE8で動かすためにちょろっと調べたので、メモっとくことに。

前置きとして、IE8以前のブラウザはjQuery 1.xを使うこと(jQueryをダウンロードしたときの記事はここ)。

で、まずはjQuery UIのソース一式をダウンロードしてくる。

ブラウザでjQueryのページを開く。
http://jqueryui.com/
今回はページの右側にある"Custom Download"をクリックすることに。
zipファイルを展開しとく。

展開したzipファイルから必要なファイルを取り出しとく。

jquery-ui.js
jquery-ui-css

フォルダの構成としてはこんな感じ。

index.html…メインにするHTMLページ
jquery-1.9.1.min.js… jQueryのJavaScriptソース
jquery-ui.js…jQuery UIのJavaScriptソース
jquery-ui.css…jQuery UIのスタイルシート

htmlページで気をつけることはこんな感じ。

<head>タグ内で<link>タグでスタイルシートを読み込むようにしとく
<input>タグにid属性をつけとく
<javascript>タグ内で<input>タグのid属性を指定した上で、jQueryのautocomplete()を呼ぶ
autocomplete()の引数に、source:と表示したい候補の文字列の配列を指定する

ソースはこんな感じ。

<html>
	<!-- header -->
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="jquery-ui.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css">
	</head>
	<!-- body -->
	<body>
		<input id="target" type="text" />
	</body>
	<!-- java script -->
	<script language="javascript" type="text/jscript">
	$('#target').autocomplete(
		{
			source: ['red','green','blue']
		}
	);
	</script>
</html>

index.htmlをIE8で表示してみるとこんな感じ。