El cuadro de lista de desplegable Select admite la función de consulta difusa de entrada, y el diseño es muy fácil de usar. El editor a continuación ha compartido el código clave con usted. Puede agregarlo y modificarlo adecuadamente de acuerdo con sus necesidades. Si tiene alguna pregunta, dame comentarios.
El código clave es el siguiente:
<html> <head> <meta http-equiv = 'content-type' content = 'text/html; Charset = GB2312 '> <title> Buzón desplegable Intryable </title> </head> <body> <script language = "javascript"> var j = 0; función selectValue (obj) {var input = obj.parentnode.nextSibling; document.all.box2.value = obj.options [obj.selectedIndex] .Text; document.getElementById ("txtSection"). valor = obj.options [obj.selectedIndex] .Value; alerta (document.getElementById ("txtSection"). valor); } función 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.setTribute ("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 = "Ninguno"; document.getElementById ("txtSection"). value = this.Value; } msg.appendChild (SelText); n ++; }}} else {document.all.msg.style.display = "Ninguno"; }} else {// Presione la tecla Down 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; }} // Presione la tecla 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; }} // Presione la tecla ENTER if (Event.KeyCode == 13) {tmPobj = document.getElementById ("SelText"+J); document.all.box2.value = tmpobj.innerhtml; msg.style.display = "Ninguno"; document.getElementById ("txtSection"). valor = tmpobj.value; }}} función selmatch (src) {var curvsel = document.all.box2.value; for (var i = 0; i <src.length; i ++) {if (src (i) .Text == Currel) {src.options (i) .selected = true; }}} function nomsg () {if (document.activeElement.id == "msg") return false; else document.all.msg.style.display = 'ninguno'; } </script> <table border = 0 cellPadding = 1 cellspacing = 0> <tr> <tr> <td> <font face = "arial" size = "2"> sección </font> </td> <td colsspan = 3> <div style = "posicion: relativo;"> <span style = "margin-left: 230px; width: 18px; overflow: hridden;" 22px; onchange = "selectValue (this)" onClick = "selmatch (this)" id = "selectOption" name = "selectOption"> <opción valor = 'all' seleccionado> all </opción> <opción valor = '0test1'> 0test1 = prueba 1 <opción valor = '0test1'> 0Test2 = testing 1 <option = '0test1'> 0test3 = testing section Descripción xxxxx aaa </ppection> </select> </span> <input name = "box2" id = "box2" onKeyUp = "inputValue (this)" onblur = "nomsg ()" onfocus = "this.select (); inputValue (this)" valor = "0"> <div it = "msg" estilo = "borde: 1px sólido; sólido; : 14px; White-Space: Nowrap; Overflow: Hidden;Lo anterior es el código de implementación de la función de consulta difusa Seleccionar el cuadro desplegable que le presenta el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!