กล่องรายการแบบดรอปดาวน์ Select รองรับฟังก์ชั่นการสืบค้นฟัซซี่อินพุตและการออกแบบนั้นใช้งานง่ายมาก ตัวแก้ไขด้านล่างได้แชร์รหัสคีย์กับคุณ คุณสามารถเพิ่มและแก้ไขได้อย่างเหมาะสมตามความต้องการของคุณ หากคุณมีคำถามใด ๆ โปรดให้ข้อเสนอแนะ
รหัสคีย์มีดังนี้:
<html> <head> <meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '> <title> กล่องดรอปดาวน์ที่ป้อนได้ </title> </head> <body> <script Language = "JavaScript"> var j = 0; ฟังก์ชั่น selectValue (obj) {var input = obj.parentNode.nextSibling; document.all.box2.value = obj.options [obj.selectedIndex] .Text; document.getElementById ("txtsection"). ค่า = obj.options [obj.selectedIndex] .Value; การแจ้งเตือน (document.getElementById ("txtsection") ค่า); } function 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) {ถ้า (obj.value! = "") {msg.style.display = ""; msg.innerhtml = ""; if (msg.haschildnodes ()) {msg.childnodes [0] .parentNode.removeChild (msg.childnodes [0]); } สำหรับ (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 = "ไม่มี"; document.getElementById ("txtsection"). value = this.value; } msg.appendchild (seltext); n ++; }}} else {document.all.msg.style.display = "ไม่มี"; }} else {// กดปุ่มลงถ้า (event.keycode == 40) {j ++; สำหรับ (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; }} // กดปุ่มถ้า (event.keycode == 38) {j--; สำหรับ (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 = "ไม่มี"; document.getElementById ("txtsection"). value = tmpobj.value; }}} ฟังก์ชั่น selmatch (src) {var currsel = document.all.box2.value; สำหรับ (var i = 0; i <src.length; i ++) {ถ้า (src (i) .text == currsel) {src.options (i). selected = true; }}} ฟังก์ชั่น nomsg () {if (document.activeElement.id == "msg") ส่งคืน false; Document.all.msg.style.display = 'ไม่มี'; } </script> <table border = 0 cellpadding = 1 cellspacing = 0> <tr> <td> <font face = "Arial" size = "2"> ส่วน </font> </td> <td colspan = 3> <div style = "ตำแหน่ง: 22px; onChange = "selectValue (this)" onClick = "selMatch (this)" id = "selectoption" name = "selectoption"> <ตัวเลือกค่า = 'เลือกทั้งหมด' ทั้งหมด> ทั้งหมด </opovie> <ตัวเลือกค่า = '0Test1'> 0Test1 = การทดสอบ 1 <ตัวเลือก value = 'ส่วน'> ส่วน = ส่วนคำอธิบาย xxxxx aaa </opoption> </select> </span> <อินพุตชื่อ = "box2" id = "box2" onkeyup = "อินพุต (นี่)" onblur = "nomsg () : 14px; Space White: Nowrap; Overflow: Hidden; Width: 230px; ตำแหน่ง: Absolute; ซ้าย: 0px; Top: 20px;ข้างต้นคือรหัสการใช้งานของฟังก์ชั่นการสืบค้นแบบฟัซซี่กล่องแบบหล่นลงที่เลือกโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!