Javascriptでの入力補助について

質問

googleやyahooで検索文字を入れたら、
リストが出てくる機能をjavasriptで実現したいと思っています。
なんとか、リストらしきものはで来るようになったのですが、選択ができません。
（本当に検索文字にたいして前方一致しているリストが表示されている感じ）
どうすれば、googleの入力みたいに↓やマウスクリックで選択できるようになるのか、
悩んでいます。

現状はこのような感じです。
出てくるリストは、最初に画面が表示された時点で、画面がもっていることとする。
javascriptの配列で持っています。
htmlの部分は、入力部分にinputタグ。その下にdivタグを使用してます。

onlode時点で、setInterval関数を使い、0,5秒ごとに関数を呼び出すようにしました。
そのなかで、入力された文字と保持しているリストを比較し、
一致しているリストの配列と件数を取得。
そのあとに、divタグのところに、innerHTMLに配列を順番にいれるとしました。

→結果として、画面で入力すると、下に候補の文字列が表示。
　ただし、そこにカーソルをもっていっても、何も出来ず表示されているだけの状態
　が出来ています。

ライブラリ等を使わず、javascriptのみで実現したいのですが、可能でしょうか。
よろしくお願いいたします。

回答No.2

fujillin

どのような方法で、何ができているのか不明なのでなんとも言えませんが…

＞そこにカーソルをもっていっても、何も出来ず表示されているだけの状態
＞が出来ています。
というのは、作成（追加）されたHTMLについてのことだと思いますが、それは

＞divタグのところに、innerHTMLに配列を順番にいれるとしました
というところで、作成しているのではないのでしょうか？

もしそうであるなら、作成するHTMLをリンク付きにすればよいのでは？
通常のリンク
　<a href="●●●">テキスト</a>
のようになっていればよろしいかと。（●●●はリンク先URL）
生成方法は文字列で操作しても良いし、createElementなどで作成していっても良いかと。

・・・というか、
＞出てくるリストは、画面がもっていることとする
というのならば、対象が最初から決まっているので、HTMLソースのリストなど （<ul><li><a href="">テキスト…　など） にしておいて、スクリプトでは単純に表示/非表示を制御するという仕組みの方が簡単そうな気がします。
これなら、要素を生成したりする必要がありません。
（検索の方法が不明なので、わかりませんが）

あと、No1様の回答と重複しますが、

＞0,5秒ごとに関数を呼び出すようにしました
入力というきっかけがはっきりしているので、No1様の回答にあるように、入力に対応した処理にした方がよろしいかと。
（無闇に何度も処理を行う必然性がないので）

入力値が変わったら（onchange）、フォーカスがはずれたら（onblur）とか、もっとこまかく見るのならキー操作（onkeydown、onkeyup）など。
仮に1文字の入力ごとにイベントをとっても入力終了の判断が難しいので、結局のところ、大抵の検索サイトなどでは、「検索」のボタンや画像をクリックすることで処理を開始するようにしているものが多いと思います。

回答No.1

0909union

＞ライブラリ等を使わず

何をいっているのか意味不明です。

＞onlode時点で、setInterval関数を使い、0,5秒ごとに関数

この発想では、プログラムに向いていません。

向いてる人なら、イベントトラップを発想します。該当のオブジェクトで、キーイベントが発生した時に、アクションを起こせばいいわけです。

そのイベントとは、「何かキーを押されたら」で発生させ、「何のキー」を押したかをループで検証し、該当文字であれば（DBとマッチング）、CSS等の仕組みで該当文字を表示させる。DIV等のコンテント表示させた物をマウス押下イベントで最初に発生したイベントのオブジェクトに文字を挿入する。最初の発生イベントオブジェクトに再度何かキーを押されたら、で、最初のループの先頭に戻る

基本的なトランザクションを示しましたので、HTML、CSSのリファレンスで該当イベントを見つけてください。

こちらのURLはIE限定となりますが、わかりやしので、

http://msdn.microsoft.com/en-us/library/ms533051(v=VS.85).aspx