<! Doctype HTML> <style> body {margin-left: 0px; margin-top: 0px; margin-Right: 0px; margin-bottom: 0px ;}. auto_hidden {width: 204px; border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; position: absolute; display: none ;}. auto_show {width: 204px; border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; Bo Rder-Right: 1px solid #333; position: absolute; Z-index: 9999;/* set the cascading sequence of objects */display: block ;}. auto_onmouseover {color: # ffffff; Background-color: highlight; width: 100% ;}. auto_onmouseout {color: #000000; width: 100%; Background-color: # ffffff ;}</style> <script language = "JavaScript"> <! -- Var $ = function (ID) {return "string" = typeof ID? Document. getelementbyid (ID): ID;} var bind = function (object, fun) {return function () {return fun. apply (object, arguments) ;}} function AutoComplete (OBJ, autoobj, arr) {This. OBJ = $ (OBJ); // input box this. autoobj = $ (autoobj); // The root node of the DIV this. value_arr = arr; // do not include the duplicate value this. index =-1; // the index of the currently selected Div this. search_value = ""; // Save the currently searched characters} autocomplete. prototype = {// initialize the position of the DIV init: function () {This. autoobj. style. left = T His. OBJ. offsetleft + "PX"; this. autoobj. style. top = This. OBJ. offsettop + this. OBJ. offsetheight + "PX"; this. autoobj. style. width = This. OBJ. offsetwidth-2 + "PX"; // subtract 2px from the border length}, // delete all required Div deletediv: function () {While (this. autoobj. haschildnodes () {This. autoobj. removechild (this. autoobj. firstchild);} This. autoobj. classname = "auto_hidden" ;}, // set the value setvalue: function (_ This) {return function (){ _ This. OBJ. value = This. seq; _ this. autoobj. classname = "auto_hidden" ;}}, // when the simulated mouse moves to the DIV, the highlighted autoonmouseover: function (_ this, _ div_index) {return function () {_ this. index = _ div_index; var length = _ this. autoobj. children. length; For (var j = 0; j <length; j ++) {If (J! = _ This. index) {_ this. autoobj. childnodes [J]. classname = 'Auto _ onmouseout';} else {_ this. autoobj. childnodes [J]. classname = 'Auto _ onmouseover ';}}}, // change classname changeclassname: function (length) {for (VAR I = 0; I <length; I ++) {if (I! = This. index) {This. autoobj. childnodes [I]. classname = 'Auto _ onmouseout';} else {This. autoobj. childnodes [I]. classname = 'Auto _ onmouseover '; this. OBJ. value = This. autoobj. childnodes [I]. SEQ ;}}, // response keyboard presskey: function (event) {var length = This. autoobj. children. length; // The cursor key "when" If (event. keycode = 40) {++ this. index; If (this. index> length) {This. index = 0;} else if (this. index = length) {This. OBJ. value = This. s Earch_value;} This. changeclassname (length);} // The cursor key "else" else if (event. keycode = 38) {This. index --; If (this. index <-1) {This. index = length-1;} else if (this. index =-1) {This. OBJ. value = This. search_value;} This. changeclassname (length);} // enter the else if (event. keycode = 13) {This. autoobj. classname = "auto_hidden"; this. index =-1;} else {This. index =-1 ;}}, // program entry start: function (event) {If (event. keycode! = 13 & event. keycode! = 38 & event. keycode! = 40) {This. init (); this. deletediv (); this. search_value = This. OBJ. value; var valuearr = This. value_arr; valuearr. sort (); If (this. OBJ. value. replace (/(^ \ s *) | (\ s * $)/g, '') =" ") {return;} // The value is null, exit try {var Reg = new Regexp ("(" + this. OBJ. value + ")", "I");} catch (e) {return;} var div_index = 0; // record the index of the created Div for (VAR I = 0; I <valuearr. length; I ++) {If (Reg. test (valuearr [I]) {var DIV = document. createelement ("Div "); Div. classname = "auto_onmouseout"; Div. SEQ = valuearr [I]; Div. onclick = This. setvalue (this); Div. onmouseover = This. autoonmouseover (this, div_index); Div. innerhtml = valuearr [I]. replace (Reg, "<strong> $1 </strong>"); // This is displayed in bold. autoobj. appendchild (DIV); this. autoobj. classname = "auto_show"; div_index ++ ;}} this. presskey (event); window. onresize = BIND (this, function () {This. init () ;}}}// --> </SCRIPT> <body> <H1 align = "center"> AutoComplete function Enter text in the text box below to test
AutoComplete Function)