Recently in writing a JavaScript framework, see the Internet has a lot of automatic completion of the form, so on a whim, with JavaScript wrote a, to add a bit of color to their frame.
Steps:
1. Pass in two parameters, the first one is the form object you want to bind, and the second is the array you want to retrieve.
2. Dynamically create a div as you want to automatically complete the layer, set properties and events (I do not set the div visible and display properties here, but its left set to " -1000px", so that it moved out of the browser, to achieve a hidden effect.
3. Retrieves the incoming array, finds the item that matches or approximates the input, and stores it in a new array. Here is a regular expression of four iterations, write bad, also hope forgive.
4. Process the new array that is stored in the retrieved data, remove the duplicate items, and write them into the Div.
5. Set the div left,top,width.
look at the complete code given below:
Copy Code code as follows:
if (!SX)
var sx={};
sx.activex={};
sx.activex.autocomplete={
Bind:function (a,s) {
var d=document.createelement ("div");
d.style.position= "Absolute";
d.flag= "AutoComplete";
Document.body.appendChild (d);
D.style.left= " -1000px";
D.style.height= "100px";
d.style.overflow= "Auto";
A.onblur=function () {
if (Document.elementfrompoint (window.event.clientx,window.event.clienty). flag== "AutoComplete" | | Document.elementfrompoint (window.event.clientx,window.event.clienty). parentnode.flag== "AutoComplete")
Return
D.innerhtml= "";
D.style.left= " -1000px";
}
A.onkeyup=function () {
if (a.value== "") {
D.innerhtml= "";
Return
}
D.innerhtml= "";
var t=[];
for (var i in s) {
if (eval ("/^" +a.value+ "$/i"). Test (S[i)) {
T.push (S[i]);
}
}
for (var i in s) {
if (eval ("/^" +a.value+ ". +$/i"). Test (S[i)) {
T.push (S[i]);
}
}
for (var i in s) {
if (eval ("/^.+" +a.value+ "$/i"). Test (S[i)) {
T.push (S[i]);
}
}
for (var i in s) {
if (eval ("/^.+" +a.value+ ". +$/i"). Test (S[i)) {
T.push (S[i]);
}
}
for (Var e=0;e<=t.length-2;e++) {
for (Var e1=e+1;e1<=t.length-1;e1++) {
if (T[e]==t[e1]) {
for (Var e2=e1+1;e2<t.length;e2++) {
if (T[e2]) {
T[E2-1]=T[E2];
}
}
T.length=t.length-1;
}
}
}
Alert (t);
for (var i in t) {
var p=document.createelement ("div");
P.innertext=t[i];
P.onmouseenter=function () {
This.style.backgroundcolor= "Blue";
}
P.onmouseleave=function () {
this.style.backgroundcolor= "White";
}
P.onclick=function () {
A.value=this.innertext;
D.style.left= " -1000px";
}
D.appendchild (P)
}
d.style.top=a.offsettop+a.offsetheight+ "px";
d.style.left=a.offsetleft+ "px";
d.style.width=a.offsetwidth+ "px";
}
}
}.
The called HTML code:
Copy Code code as follows:
<title>untitled document</title>
<body>
<script src= "Kongjian.js" ></script>
<input type= "text" size= "a" id= "a" >
<input type= "text" size= "id=" A1 ">
<script>
Sx.activex.autocomplete.bind (document.getElementById ("a"), ["ASD", "a", "sad", "er", "ewrew", "AADASD", "WQQWRQW", " Asasf "," QWEQW "]);
Sx.activex.autocomplete.bind (document.getElementById ("A1"), ["ASD", "a", "sad", "er", "ewrew", "AADASD", "WQQWRQW", " Asasf "," QWEQW "]);
</script>
</body>
Code is not optimized, but also please forgive, here gives a train of thought, let you laughed at.
