Share an unintentional discovery of the automatic completion of the source code. This test is used in the array, when the actual use, we switch to Ajax from the server side of the way to get the OK.
Tip: You can save directly to an HTML file to see the effect.
<!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;
border-right:1px solid #333;
Position:absolute;
z-index:9999; /* Set the stacking order 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);//div root node
This.value_arr=arr; Do not include duplicate values
This.index=-1; The index of the currently selected Div
This.search_value= ""; Save the characters for the current search
}
autocomplete.prototype={
Initialize the DIV's location
Init:function () {
This.autoObj.style.left = this.obj.offsetLeft + "px";
This.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
This.autoobj.style.width= this.obj.offsetwidth-2 + "px";/minus the length of the border 2px
},
Delete all the div required for automatic completion
Deletediv:function () {
while (This.autoObj.hasChildNodes ()) {
This.autoObj.removeChild (This.autoObj.firstChild);
}
This.autoobj.classname= "Auto_hidden";
},
Setting values
Setvalue:function (_this) {
return function () {
_this.obj.value=this.seq;
_this.autoobj.classname= "Auto_hidden";
}
},
When you simulate a mouse move to a Div, Div highlights
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;
Cursor Key "↓"
if (event.keycode==40) {
++this.index;
if (this.index>length) {
this.index=0;
}else if (this.index==length) {
This.obj.value=this.search_value;
}
This.changeclassname (length);
}
Cursor Key "↑"
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
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;} Value is null, exit
try{var reg = new RegExp ("(" + This.obj.value +) "," I ");}
catch (e) {return;}
The index of the div created by the Var div_index=0;//record
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>")//Search for bold character display
This.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 (AutoComplete function) <div align= "center" ><input type= "text" style= "width:300px;height:20px;font-size:14pt;" id= "O" onkeyup= " Autocomplete.start (event) "></div>
<div class= "Auto_hidden" id= "Auto" ><!--automatic completion div--></div>
<script>
var autocomplete=new autocomplete (' O ', ' auto ', [' B0 ', ' B12 ', ' B22 ', ' B3 ', ' B4 ', ' B5 ', ' B6 ', ' B7 ', ' B8 ', ' B2 ', ' Abd ', ' Ab ', ' ACD ', ' ACCD ', ' B1 ', ' CD ', ' CCD ', ' CBCV ', ' cxf '];
</SCRIPT>
</body>
