人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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);

●質問者: onigirin
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript アドバイス エリア オプション キーワード
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント ベストアンサー

使い方の説明にある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);

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

◎質問者からの返答

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

ズバリ解決しました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ