welcome to tetsuyanbo web site!!

tetsuyanbo

JavaScript プログラミング

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

更新日:

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は手元に環境がないから動作確認できず...。

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

-JavaScript, プログラミング
-, , , , , , , , , , , , , , , , , , , , ,

Copyright© tetsuyanbo , 2021 All Rights Reserved Powered by STINGER.