Code for the Select drop-down box fuzzy query function and the drop-down box fuzzy query
The select drop-down list box supports the fuzzy search input function. The design is very user-friendly. The following small series will share with you the key code. You can add and modify the code as needed, if you have any questions, please feel free to give me feedback.
The key code is as follows:
<HTML> <HEAD> <META http-equiv = 'content-type' Content = 'text/html; charset = gb2312 '> <TITLE> drop-down box </TITLE> </HEAD> <BODY> <Script Language = "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. getElemen TById ("txtSection "). value);} 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) {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. setA Ttribute ("id", "selText" + n); selText. onmouseover = function () {this. style. backgroundColor = '#003399'; this. style. color = '# ffff';} selText. onmouseout = function () {this. style. backgroundColor = '# ffff'; this. style. color = '#000000';} selText. onclick = function () {document. all. box2.value = this. innerHTML; msg. style. display = "none"; document. getElementById ("txtSection "). value = this. value;} msg. appendChil D (selText); n ++ ;}} else {document. all. msg. style. display = "none" ;}} else {// press down key if (event. keyCode = 40) {j ++; for (var I = 0; I <src. length; I ++) {tmpObj = document. getElementById ("selText" + I); if (tmpObj! = Null) {tmpObj. style. backgroundColor = '# ffff'; tmpObj. style. color = '#000000';} tmpObj = document. getElementById ("selText" + j); if (tmpObj! = Null) {tmpObj. style. backgroundColor = '#003399'; tmpObj. style. color = '# ffff';} else {j = 0 ;}// press up key if (event. keyCode = 38) {j --; for (var I = 0; I <src. length; I ++) {tmpObj = document. getElementById ("selText" + I); if (tmpObj! = Null) {tmpObj. style. backgroundColor = '# ffff'; tmpObj. style. color = '#000000';} tmpObj = document. getElementById ("selText" + j); if (tmpObj! = Null) {tmpObj. style. backgroundColor = '#003399'; tmpObj. style. color = '# ffff';} else {j = 2 ;}// press enter key if (event. keyCode = 13) {tmpObj = document. getElementById ("selText" + j); document. all. box2.value = tmpObj. innerHTML; msg. style. display = "none"; document. getElementById ("txtSection "). value = tmpObj. value ;}} function 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 ;}} function NoMsg () {if (document. activeElement. id = "msg") return false; else document. all. msg. style. display = 'none ';} </Script> <TABLE border = 0 cellPadding = 1 cellSpacing = 0 width = "100%"> <TR> <TD width = "24%"> <font face = "Arial" size = "2"> Section </font> </TD> <td colspan = 3 width = "76%"> <div style = "position: relative; "> <span style =" margin-left: 230px; width: 18px; overflow: hidden; "> <select style =" HEIGHT: 22px; WIDTH: 250px; margin-left:-232px; "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 = 'core'> SECTION = SECTION Description xxxxx aaa </OPTION> </select> </span> <input name = "box2" id = "box2" style = "width: 230px; position: absolute; left: 0px; "onkeyup =" InputValue (this) "onblur =" NoMsg () "onfocus =" this. select (); InputValue (this) "value =" 0 "> <div id =" msg "style =" border: 1px solid green; font-size: 14PX; white-space: nowrap; overflow: hidden; width: 230px; position: absolute; left: 0px; top: 20px; display: none "> </div> <Input Type =" Hidden "Name =" txtSection "id =" txtSection "> </TD> </TR> </TABLE> <p> </BODY> </HTML>
The above is the code for the Select drop-down box fuzzy query function introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!