1.9.x

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ページで気をつけることはこんな感じ。 &lt;head&gt;タグ内で&lt;link&gt;タグでスタイルシートを読み込むようにしとく &lt;input&gt;タグにid属性をつけとく &lt;javascript&gt;タグ内で&lt;input&gt;タグのid属性を指定した上で、jQueryのautocomplete()を呼ぶ autocomplete()の引数に、source:と表示したい候補の文字列の配列を指定する ソースはこんな感じ。 &lt;html&gt; &lt;!-- header --&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;script src="jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"&gt; &lt;/head&gt; &lt;!-- body --&gt; &lt;body&gt; &lt;input id="target" type="text" /&gt; &lt;/body&gt; &lt;!-- java script --&gt; &lt;script language="javascript" type="text/jscript"&gt; $('#target').autocomplete( { source: ['red','green','blue'] } ); &lt;/script&gt; &lt;/html&gt; index.htmlをIE8で表示してみるとこんな感じ。 で、候補を表示するとこんな感じ。 IE8ではできたな。 IE6は手元に環境がないから動作確認できず...。 ま、とりあえずメモってことで。

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