A caixa de listagem suspensa selecionada suporta a função de consulta difusa de entrada e o design é muito fácil de usar. O editor abaixo compartilhou o código -chave com você. Você pode adicioná -lo e modificá -lo adequadamente de acordo com suas necessidades. Se você tiver alguma dúvida, me dê feedback.
O código -chave é o seguinte:
<html> <head> <meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '> <title> caixa suspensa insuficiente </ititle> </ad Head> <body> <script linguagem = "javascript"> var j = 0; função selectValue (obj) {var input = obj.parentnode.nextsbling; document.all.box2.value = obj.options [obj.seletedIndex] .text; document.getElementById ("txtSection"). value = obj.options [obj.SelectedIndex] .Value; alert (document.getElementById ("txtSection"). valor); } função 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]); } para (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 (). 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 = "nenhum"; document.getElementById ("txtSection"). value = this.value; } msg.appendChild (SelText); n ++; }}} else {document.all.msg.style.display = "nenhum"; }} else {// Pressione a 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; }} // Pressione a tecla se (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; }} // Pressione a tecla Enter se (event.KeyCode == 13) {tmpobj = document.getElementById ("Seltext"+J); document.all.box2.value = tmpobj.innerhtml; msg.style.display = "nenhum"; document.getElementById ("txtSection"). value = tmpobj.value; }}} função SelMatch (src) {varcrsel = document.all.box2.value; for (var i = 0; i <src.length; i ++) {if (src (i) .Text == Currel) {src.options (i) .Selected = true; }}} função nomsg () {if (document.activeElement.id == "msg") return false; else document.all.msg.style.display = 'nenhum'; } </Script> <tabela borda = 0 célulapadding = 1 celularspacacing = 0> <tr> <td> <font face = "arial" size = "2"> seção </font> </td> <td colspan = 3> <div estilo = "Posição: relativa; 22px; onChange = "SelectValue (this)" OnClick = "SelMatch (this)" id = "selectOption" name = "SelectOption"> <Opção Value = 'All' Selected> All </pption> <Opção Value = '0Test1'> 0Test1 = Testing 1 Value = '0Test1'> 0Test2 = 1 < value = 'Seção'> Seção = Seção Descrição xxxxx aaa </pption> </leclect> </span> <name de entrada = "box2" id = "box2" onkeyup = "inputValue (this)" onblur = "nomsg ()" onfocus = "this.select (); inputValue (this)" value = "0" : 14px; espaço em branco: Nowrap; Overflow: Hidden;O acima é o código de implementação da função de consulta confusa selecionada da caixa suspensa introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!