Das Feld Dropdown-Listen auswählen unterstützt die Fuzzy-Query-Funktion ein und das Design ist sehr benutzerfreundlich. Der folgende Herausgeber hat den Schlüsselcode mit Ihnen geteilt. Sie können es entsprechend Ihren Anforderungen hinzufügen und ändern. Wenn Sie Fragen haben, geben Sie mir bitte Feedback.
Der Schlüsselcode lautet wie folgt:
<Html> <kopf> <meta http-äquiv = 'content-type' content = 'text/html; charSet = gb2312 '> <title> Eingabemierbares Dropdown-Feld </title> </head> <body> <script Sprache = "JavaScript"> var j = 0; Function 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"). Wert); } Funktion 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]); } für (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 = "Keine"; document.getElementById ("txtSection"). value = this.Value; } msg.appendchild (seltext); n ++; }}} else {document.all.msg.style.display = "Keine"; }} else {// Drücken Sie die Taste nach unten (Ereignis.KeyCode == 40) {j ++; für (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! tmpobj.style.color = '#ffffff'; } else {j = 0; }} // Drücken Sie die Taste if (Ereignis.KeyCode == 38) {j-; für (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! tmpobj.style.color = '#ffffff'; } else {j = 2; }} // Drücken Sie die Eingabetaste if (Ereignis.KeyCode == 13) {tmpOBJ = document.getElementById ("seltext"+j); document.all.box2.Value = tmpobj.innerhtml; msg.style.display = "Keine"; document.getElementById ("txtSection"). value = tmpobj.value; }}} Funktion Selmatch (SRC) {var currsel = document.all.box2.Value; für (var i = 0; i <src.length; i ++) {if (src (i) .Text == cursel) {src.options (i) .Selected = true; }}} function nomsg () {if (document.activeLement.id == "msg") return false; sonst document.all.msg.style.display = 'none'; } </Script> <table border = 0 cellpadding = 1 cellspacing = 0> <tr> <td> <font face = "arial" size = "2"> Abschnitt </font> </td> <td colspan = 3> <div style = "Position: relativ;"> <span style = "margin-left: 230px; 22px; onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" > <OPTION value='ALL' Selected>ALL</OPTION> <OPTION value='0TEST1'>0TEST1 = Testing 1 <OPTION value='0TEST1'>0TEST2 = Testing 1 <OPTION value='0TEST1'>0TEST3 = Testing 1 <OPTION Value = 'Abschnitt'> Abschnitt = Abschnitt Beschreibung xxxxx AAA </option> </select> </span> <Eingabename = "box2" id = "box2" OnKeyUp = "inputValue (this)" Onblur = "nomsg ()" onfocus = "this.select (); InputValue (this). : 14px; weißer Raum: nowrap; Überlauf: versteckt;Das obige ist der Implementierungscode der Fuzzy-Query-Funktion des Dropdown-Box auswählen, die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!