La zone de liste déroulante Select prend en charge la fonction de requête floue d'entrée et la conception est très conviviale. L'éditeur ci-dessous a partagé le code clé avec vous. Vous pouvez l'ajouter et le modifier de manière appropriée en fonction de vos besoins. Si vous avez des questions, veuillez me donner des commentaires.
Le code clé est le suivant:
<html> <adref> <meta http-equiv = 'content-type' content = 'text / html; charset = gb2312 '> <tight> BOX DRIB-DOWN ENTURABLE </TITAL> </ head> <body> <script linguisse = "javascript"> var j = 0; fonction 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"). Valeur); } fonction 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]); } pour (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 = "aucun"; document.getElementById ("txtSection"). Value = this.Value; } msg.appendChild (SelText); n ++; }}} else {document.all.msg.style.display = "Aucun"; }} else {// Appuyez sur la touche 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; }} // Appuyez sur la touche si (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; }} // Appuyez sur la touche Entrée if (event.KeyCode == 13) {tmpoBj = document.getElementById ("selText" + J); document.all.box2.value = tmpobj.innerhtml; msg.style.display = "aucun"; document.getElementById ("txtSection"). Value = tmpobj.Value; }}} fonction 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; }}} fonction nomsg () {if (document.activeElement.id == "msg") return false; else document.all.msg.style.display = 'Aucun'; } Comment 22px; largeur: 250px; 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='SECTION'>SECTION = Section Description xxxxx aaa </ option> </ select> </span> <input name = "box2" id = "box2" onkeyup = "inputvalue (this)" onblur = "nomsg ()" onfocus = "this.select (); inputValue (this)" value = "0"> <div id = "msg" style = "border: 1px Solid Green; font-size; : 14px; espace blanc: Nowrap; débordement: caché; largeur: 230px; position: absolue; gauche: 0px; top: 20px; affichage: aucun "> </ div> </div> <entrée type =" Hidden "name =" txTesection "id =" txtSection "> </td> </ tr> </pallCe qui précède est le code d'implémentation de la fonction de requête floue SELECT Down-Down Fuzzy vous présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!