javascriptの、サジェスト改造について。


http://www.enjoyxstudy.com/javascript/suggest/
こちらの、キーワードサジェストを使ってみました。

1つのフォームだけなら上手く動きましたが、複数のフォームで、それぞれサジェスト表示させたいと思っています。

「検索ボックス1」「検索ボックス2」「検索ボックス3」と、3つボックスがあったとして、
それぞれのボックスで、何か言葉を入れる度に、サジェストさせたいです。
(3つのボックス、それぞれ入力するときに、それぞれサジェストさせたい)


サンプルコードの中で、エレメントIDと、エリアIDを、動的に取得できれば改造できそうですが・・・。
「現在、どの検索ボックスを選択しているのか?」によって、複数対応できそうに思っていますが、うまくいきません。

なにかアドバイス頂けると助かります。

function startSuggest() {
new Suggest.Local(
"text", // 入力のエレメントID
"suggest", // 補完候補を表示するエリアのID
list, // 補完候補の検索対象となる配列
{dispMax: 10, interval: 1000}); // オプション
}

window.addEventListener ?
window.addEventListener('load', startSuggest, false) :
window.attachEvent('onload', startSuggest);

回答の条件
  • 1人50回まで
  • 13歳以上
  • 登録:2010/11/11 23:23:41
  • 終了:2010/11/12 17:47:12

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512010/11/12 04:09:31

ポイント60pt

使い方の説明にあるCSS、フォームのHTML、Suggestの生成を1セットと考えて、対象フォームの数だけ作成するといいです。

・CSS

#suggest, #suggest2, #suggest3 {
    position: absolute;
    background-color: #FFFFFF;
    border: 1px solid #CCCCFF;
    font-size: 90%;
    width: 200px;
}
#suggest div, #suggest2 div, #suggest3 div {
    display: block;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
}
#suggest div.select, #suggest2 div.select, #suggest3 div.select { /* キー上下で選択した場合のスタイル */
    color: #FFFFFF;
    background-color: #3366FF;
}
#suggest div.over, #suggest2 div.over, #suggest3 div.over { /* マウスオーバ時のスタイル */
    background-color: #99CCFF;
}

・フォームのHTML

			<h3>検索フォーム1</h3>
			<form onsubmit="return false;">
				<table>
					<tr>
						<td>入力:</td>
						<td>
							<!-- 入力フォーム -->
							<input id="text" type="text" name="pattern" value="" autocomplete="off" size="10" style="display: block">
							<!-- 補完候補を表示するエリア -->
							<div id="suggest" style="display:none;"></div>
						</td>
					</tr>
				</table>
			</form>
			<h3>検索フォーム2</h3>
			<form onsubmit="return false;">
				<table>
					<tr>
						<td>入力:</td>
						<td>
							<!-- 入力フォーム -->
							<input id="text2" type="text" name="pattern2" value="" autocomplete="off" size="10" style="display: block">
							<!-- 補完候補を表示するエリア -->
							<div id="suggest2" style="display:none;"></div>
						</td>
					</tr>
				</table>
			</form>
			<h3>検索フォーム3</h3>
			<form onsubmit="return false;">
				<table>
					<tr>
						<td>入力:</td>
						<td>
							<!-- 入力フォーム -->
							<input id="text3" type="text" name="pattern3" value="" autocomplete="off" size="10" style="display: block">
							<!-- 補完候補を表示するエリア -->
							<div id="suggest3" style="display:none;"></div>
						</td>
					</tr>
				</table>
			</form>

・Suggestの生成

	function startSuggest() {
	  new Suggest.Local(
	        "text",    // 入力のエレメントID
	        "suggest", // 補完候補を表示するエリアのID
	        list,      // 補完候補の検索対象となる配列
	        {dispMax: 10, interval: 1000}); // オプション
	}

	window.addEventListener ?
	  window.addEventListener('load', startSuggest, false) :
	  window.attachEvent('onload', startSuggest);

	function startSuggest2() {
	  new Suggest.Local(
	        "text2",    // 入力のエレメントID
	        "suggest2", // 補完候補を表示するエリアのID
	        list2,      // 補完候補の検索対象となる配列
	        {dispMax: 10, interval: 1000}); // オプション
	}

	window.addEventListener ?
	  window.addEventListener('load', startSuggest2, false) :
	  window.attachEvent('onload', startSuggest2);


	function startSuggest3() {
	  new Suggest.Local(
	        "text3",    // 入力のエレメントID
	        "suggest3", // 補完候補を表示するエリアのID
	        list3,      // 補完候補の検索対象となる配列
	        {dispMax: 10, interval: 1000}); // オプション
	}

	window.addEventListener ?
	  window.addEventListener('load', startSuggest3, false) :
	  window.attachEvent('onload', startSuggest3);

※補完候補の検索対象となる配列は、上記のようにそれぞれ別の物を指定しても、同じ配列を指定してもどちらでも動作します。

id:onigirin

どうもありがとうございます!

ズバリ解決しました!

2010/11/12 17:47:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません