選択したドロップダウンリストボックスは、入力ファジークエリ機能をサポートしており、デザインは非常にユーザーフレンドリーです。以下の編集者は、重要なコードを共有しています。ニーズに応じて適切に追加および変更できます。ご質問がある場合は、フィードバックをご用意ください。
重要なコードは次のとおりです。
<html> <head> <Meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '> <title>入力可能なドロップダウンボックス</title> </head> <body> <スクリプト言語= "javascript"> var j = 0;関数SelectValue（obj）{var input = obj.parentnode.nextsibling; document.all.box2.value = obj.options [obj.selectedindex] .text; document.getElementById（ "txtsection"）。value = obj.options [obj.selectedindex] .value; alert（document.getElementById（ "txtsection"）。値）; }関数inputValue（obj）{var n = 1; var tmpobj; var src = document.all.selectoption; var msg = document.all.msg; if（event.keycode！= 40 && event.keycode！= 38 && event.keycode！= 13）{if（obj.value！= ""）{msg.style.display = ""; msg.innerhtml = ""; if（msg.haschildnodes（））{msg.childnodes [0] .parentnode.removechild（msg.childnodes [0]）; } for（var i = 0; i <src.length; i ++）{var selvalue = document.createelement（ "div"）; var seltext = document.createelement（ "div"）; seltext.value = src（i）.value; seltext.innerhtml = src（i）.text; if（src（i）.text.tolowercase（）。indexof（obj.value.tolowercase（））== 0）{seltext.setattribute（ "id"、 "seltext"+n）; seltext.onmouseover = function（）{this.style.backgroundcolor = '＃003399'; this.style.color = '＃ffffff'; } seltext.onmouseout = function（）{this.style.backgroundcolor = '＃ffffff'; this.style.color = '＃000000'; } seltext.onclick = function（）{document.all.box2.value = this.innerhtml; msg.style.display = "none"; document.getElementById（ "txtsection"）。value = this.value; } msg.AppendChild（seltext）; n ++; }}} else {document.all.msg.style.display = "none"; }} else {//キーを押してif（event.keycode == 40）{j ++; for（var i = 0; i <src.length; i ++）{tmpobj = document.getElementById（ "seltext"+i）; if（tmpobj！= null）{tmpobj.style.backgroundcolor = '＃ffffff'; tmpobj.style.color = '＃000000'; }} tmpobj = document.getElementById（ "seltext"+j）; if（tmpobj！= null）{tmpobj.style.backgroundcolor = '＃003399'; tmpobj.style.color = '＃ffffff'; } else {j = 0; }} //キーを押しますif（event.keycode == 38）{j-; for（var i = 0; i <src.length; i ++）{tmpobj = document.getElementById（ "seltext"+i）; if（tmpobj！= null）{tmpobj.style.backgroundcolor = '＃ffffff'; tmpobj.style.color = '＃000000'; }} tmpobj = document.getElementById（ "seltext"+j）; if（tmpobj！= null）{tmpobj.style.backgroundcolor = '＃003399'; tmpobj.style.color = '＃ffffff'; } else {j = 2; }} // Enterキーを押しますif（event.keycode == 13）{tmpobj = document.getElementById（ "seltext"+j）; document.all.box2.value = tmpobj.innerhtml; msg.style.display = "none"; document.getElementById（ "txtsection"）。value = tmpobj.value; }}} function selmatch（src）{var currsel = document.all.box2.value; for（var i = 0; i <src.length; i ++）{if（src（i）.text == currsel）{src.options（i）.selected = true; }}} function nomsg（）{if（document.activeElement.id == "msg"）return false; else document.all.msg.style.display = 'none'; } </script> <table border = 0 cellpadding = 1 cellspacing = 0> <tr> <td> <font face = "arial" size = "2">セクション</font> </td> <td colspan = 3> <div style = "position：reative;"> <span style = "height-left：230px; width：18px;幅：250px;マージン左：-232px; " onchange = "selectValue（this）" onclick = "selmatch（this）" id = "selectoption" name = "selectoption"> <option value = 'aleed> aall </option> <option value =' 0test1 '> 0test1 =テスト1 <オプション値=' 0test1 '>値= 'セクション'>セクション=セクション説明xxxxx aaa </option> </select> </span> <input name = "box2" id = "box2" onkeyup = "inputvalue =" nomsg（） "onfocus =" this.select（）; ：14px;ホワイトスペース：nowrap;オーバーフロー：width：230px; position：absolute; left：0px; top：20px; display：none "> </div> </div> <indiv>" hidden "name =" txtsection "id =" txtsection "> </td>上記は、編集者が紹介したSelect Drop-Down Box Fuzzyクエリ関数の実装コードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！