- ベストアンサー
onkeyupなどで自動でフォームに入力したい。
商品検索を製作しようと思っていますが、参考になるサイト等教えて頂きたいと思います。 フォーム１へ商品コードを入力すると、予測やマッチしフォームBへ 商品名が自動で入力される。 宜しくお願い致します。 開発環境はAjax,Javascript,CGIで考えております。
- eiseima
- お礼率43% (7/16)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
var List=[ ～ ]; の部分を外部スクリプトファイルにして読み込む。 過去に書いたが「リンク集をCSVファイルで・・」のようにして List[]に展開する？ http://oshiete1.goo.ne.jp/qa3947356.html
その他の回答 (2)
<html> <body> Key:<input type="text" id="key" size="10" onKeyup="chk()"> Data:<input type="text" id="ob" value="" size="30"><br> List:<div id="nn" style="border:1px solid #cce;width:20em"></div> <script> var List=[ ['001','ホンダ' ], ['002','トヨタ' ], ['013','日産' ], ['014','スズキ' ], ['101','アメリカ' ], ['102','日本' ], ['113','イギリス' ], ['114','ドイツ' ] ]; function chk(){ var k=document.getElementById('key').value; inht=''; //先頭一致なら //r= new RegExp('^'+k,'gi'); r= new RegExp(k,'gi'); c=0; for(i=0,mx=List.length;i<mx;i++){ if(List[i][0].match(r)){ inht+='<a href="javascript:setval(\''+List[i][1]+'\')">'+List[i][1]+'</a><br>'; c++;if(c>4) break; } } document.getElementById('nn').innerHTML=(inht=='')?'該当なし':inht; } function setval(s){ document.getElementById('ob').value=s; } </script> </body> </html> 開発環境にCGIとあるがPerlとかPHPとかあると思うのだが・・ データベースが指定されていないので、結局CGIの中で検索すると判断。つまり端末側で処理するも同じかなと思った。 Ajaxを利用することで、通信するデータ量は減ると思われるのだが 回線速度がそこそこ速く、数百ぐらいならこれでも許容範囲かな？
補足
有難う御座いました！ まさにこれを探していました。 商品点数は３００弱なのでデーターベースまでは 必要なかと思っております。 参考に書いて頂いてる配列Listをテキストから読み込ませる 場合はどうしたらよいでしょうか？ 重ね重ね申し訳御座いません。
- pick52
- ベストアンサー率35% (166/466)
Ajax使えばできるでしょう。 郵便番号検索などのサンプルを参考にしてください。 たくさんサンプルはあるので自分で探してみてください。
お礼
ご親切に細かな説明ありがとうございました。 これで出来そうです。 もっとJavaを勉強したいと思います。 また、機会がございましたら宜しくお願い致します。 感謝しております。