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

JavaScript

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

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

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

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

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

  • jquery-ui.js
    16855_10
  • jquery-ui-css
    16855_11

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

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

16855_05

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で表示してみるとこんな感じ。

16855_06

で、候補を表示するとこんな感じ。

16855_07

IE8ではできたな。
IE6は手元に環境がないから動作確認できず…。

ま、とりあえずメモってことで。