Think Different.

インクリメンタルサーチ

Ajax で作ってみました。
フォームにワードを入力すると、1文字入力するごとに、下のSELECT BOXに、データベースから検索されたデータが一覧表示されるやつです。
店舗を一覧から選択して、データ入力するという機能を作っていたのですが、店舗が数百件とかになると、プルダウンでは、探すのが大変だから何とかしろーということでやってみました。

暫定版Ajax用ライブラリ

http://jsgt.org/mt/archives/01/000409.html

ここのライブラリを使わせていただき、SpringFramework + Struts + JSTL + XML でやってます。
XMLから、Java オブジェクトへの変換は、Relaxer を使いました。
DBは、PostgreSQLを使ってます。

入門Ajax の 204ページにある onkeyup のサンプルと、 208ページにある onchange のサンプルの応用版です。
テキストフィールドに文字を入力する度に、 onkeyup で入力を検知、入力した文字列を POST して、 Struts の ActionForm を通して受信、XMLで検索結果を返します。
それを、JavaScriptを使って処理し、SELECT BOX へ一覧表示させます。
まだまだ、すぱげってぃそーす なので、まだ公開できるようなものではないですが、コンポーネント化して、そのうち公開しようと思ってます。

作ってみた感じ、意外に短いコードで実装できてびっくり。
今まで、検索してSELECT BOX へ表示というのをやるには、複数ページに分割したりするので、Java で実装しようと思うと（実装の仕方にもよりますが）結構な量のコードを書くことになり、なかなか大変でした。
でも、これならすっきり書けるし、移植性も良さそうです。

サンプルも、そのうち作ろうかと思ってますんで＾＾；
正月明けまでに仕上げなきゃいけない仕事があって、ちょっと余裕が・・・（汗）

もし、すぱげってぃそーすでもいいから、どんな風になってるかみてみたいという方がいらっしゃいましたら、コメントいただければ公開します＾＾；

• by みそ
• at 2006年1月 3日 01:05
• in Ajax
• 
•