- ベストアンサー
[Javascript]テキストボックス入力でコンボ絞込みの技！？
おはよう御座います。 ＷＥＢアプリを開発しています者で、困っておりますのでＨＥＬＰです！ テキストボックスとドロップダウンボックスが並んでいます。 ドロップの中には・・・ （value / 表示値） aaa / 商品Ａ と abc / 商品Ｂ と bbb / 商品Ｃ と caa / 商品Ｄ という４つが入っているとします。 テキストボックスに a と入れるとＡ，Ｂだけに絞り込まれ、 次に b （このとき ab）を入れるとＢだけに絞り込まれるというような技はありませんか？？ また、完全に絞り込まれて表示までもなくなるまでいかずしても、選択されているアイテムが変わるだけでもいいのですが・・・。 実際はドロップ内に３０以上の選択内容が入っているためドロップで探して選択・・・ということができる状況にはないのです。 テキストで入力しながら絞り込むなどができれば非常に便利になります。 是非とも宜しくお願いいたします。 近い内容が紹介されているサイトの紹介でもかまいませんので宜しくお願いいたします！
- zenon55
- お礼率15% (59/381)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"><!-- function ct(obj){ for(var i = 0; i < document.mf.sl.options.length; i++){ if(!eval("document.mf.sl.options[i].value.match(/^"+obj.value+".*/)")){ document.mf.sl.options[i].style.backgroundColor="gray"; } else{ document.mf.sl.options[i].style.backgroundColor="white"; if(document.mf.sl.options[document.mf.sl.selectedIndex].style.backgroundColor=="gray")document.mf.sl.selectedIndex=i; } } } //--></script> </head> <body> <form name="mf"> <input type="text" onChange="ct(this)"> <select name="sl"> <option value="aaa">商品A</option> <option value="abc">商品B</option> <option value="bbb">商品C</option> <option value="caa">商品D</option> </select> </form> </body> </html> 一致しないところを灰色にします。 そして、白いところの一番上を選択します。 多分ネットスケープは対応していないかと
その他の回答 (1)
- mirurin
- ベストアンサー率43% (48/111)
<script> function set(){ f.sel.options[0] = new Option("商品A","aaa"); f.sel.options[1] = new Option("商品B","abc"); f.sel.options[2] = new Option("商品C","bbb"); f.sel.options[3] = new Option("商品D","caa"); } function txtchange() { set(); for (i=0; i<f.sel.length; i++) { if (f.sel(i).value.search(f.txt.value) != 0) { f.sel.options[i] = null; i--; } } } </script> <body onLoad="set();"> <form name="f"> <input name="txt" type=text onkeyup="txtchange()"> <select name="sel"></select> </form> </body>
