入力補完サンプル

最近勉強していないので、もうほとんどの方はやったことあるでしょうが、お勉強のために…
「入力補完」テキストボックスで候補入れると、リストがでるあれです。プラグインも山ほどありましたが、せっかくなので、自分でやりたいので…
とはいっても、「jquery.autocomplete」は仕様の参考にしました。
http://jquery.bassistance.de/autocomplete/demo/

まずは、洗い出し。

• テキストボックス(現段階では、テキストエリアは考慮しない)に文字を打ち込むまたは、文字を削除すると候補リストが表示される。
• 対象のテキストボックスまたは、候補が表示されているエリアからフォーカスをはずすと、リスト非表示。
• 候補リストは↓↑キー＋Enterキーまたは、マウスにより選択可能。
• 候補リストは、当然スクロール考慮↓↑キーにより選択されている候補が隠れたら、スクロールする。
• データの受け渡しは、Ajax + Json。(まあ、ここはイメージがわきやすいので、後回しにして、とりあえず、変数にリテラルで保持)
• 最終的には、プラグイン化したい。(テキストボックスとdivだけユーザに作成してもらって、クラスを指定すると、あら、不思議みたいにしようかな…まだわからないけど…)

1. テキストボックス(現段階では、テキストエリアは考慮しない)に文字を打ち込むまたは、文字を削除すると候補リストが表示される。

$("テキストボックスのセレクター").bind('keypress change',function(event){

});