- ベストアンサー
リスト（コンボ）ボックスの日本語による項目選択
Htmlのリストボックス（select)で、複数文字の日本語を入力してリストを選択する方法を教えて下さい。 IEデフォルトの動きでは、入力された最後の文字から始まる語が選択されます。 Javascriptのサンプルを提供して頂けるとありがたいです。 例：<option>あか</option><option>かき</option> というリストで「あか」と打って「あか」を選択したいのです。
- isi_sukima
- お礼率55% (11/20)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
textboxに入力→リスト選択ですね？ <html> <head> <title>リストボックス自動選択</title> <script type="text/javascript"> <!-- function set(){ var txt=document.hoge.hogetxt.value; for(var i=0;i<document.hoge.hogebox.options.length;i++){ if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){ document.hoge.hogebox.selectedIndex=i; i=10000; } } } //--> </script> </head> <body> <form name="hoge"> <input type="text" value="" name="hogetxt" size=4 maxlength=4><input type="button" value="リストボックス自動選択" onclick="set()"><br> <select name="hogebox"> <option> </option> <option>あか</option> <option>あき</option> <option>あく</option> <option>あけ</option> </select> </form> </body> </html> インデントが無くなっているので自分で修正したほうがいいかも知れません。
その他の回答 (1)
- m035
- ベストアンサー率44% (38/86)
テキストボックスを隠して擬似的にやってみました。 <html> <head> <title>リストボックス自動選択2</title> <script type="text/javascript"> <!-- function set(txt){ var flag=0; for(var i=0;i<document.hoge.hogebox.options.length;i++){ if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0&&flag==0){ document.hoge.hogebox.selectedIndex=i; flag=1; } } if(flag==0){ document.hoge.hogebox.selectedIndex=0; } } //--> </script> </head> <body> <form name="hoge"> 使用法：リストボックスをクリックし、キー入力してください。<br>入力後は画面上のどこかをクリックしてください。<br>検索内容とヒットすればボックスが自動選択されます。<br> <select name="hogebox" onclick="document.hoge.kakusi.focus()"> <option>なし</option> <option>あか</option> <option>あき</option> <option>あく</option> <option>あけ</option> </select> <input type="text" name="kakusi" size=10 style="position:absolute; top:-100; left:-100; width:1; height:1;" onblur="set(this.value);this.value=''"> </form> </body> </html> 例によってインデントは自分で。
お礼
m035さん どうもありがとうございました。 とても助かりました！
お礼
m035様 どうもありがとうございます。 ただ想定しているのは「textboxに入力→リスト選択」という方法ではなく、リストボックスにカーソルがある状態から文字入力し、選択したいのですがそういった方法は不可能でしょうか。
補足
m035様 どうもありがとうございます。 ただ想定しているのは「textboxに入力→リスト選択」という方法ではなく、リストボックスにカーソルがある状態から文字入力し、選択したいのですがそういった方法は不可能でしょうか。