Use javascript to imitate IE's automatic completion of a form similar to the automatic completion_javascript skills

I was writing a javascript framework recently, and I saw a lot of forms with auto-complete functions on the Internet, so on a whim, I wrote one in javascript to add some color to my framework.

Steps:
1. Pass in two parameters, the first is the form object you want to bind, and the second is the array you want to retrieve.
2. Dynamically create a div as the layer you want to automatically complete , set attributes and events (I did not set the visible and display attributes of the div here, but set its left to "-1000px", thus moving it out of the browser and achieving a hidden effect.
3. Retrieve the incoming array, find items that match or are similar to the input content, and store them in a new array. Four iterations were performed here using regular expressions. I apologize for the poor writing. .
4. Process the new array where the retrieved data is stored, remove items with duplicate content, and write them into the div.
5. Set the left, top, and width of the div.

Look at the complete code given below:

Copy the code The code is 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;e2if(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 html code called:

Copy the code The code is as follows:

<script> <br>sx.activex.autocomplete.bind(document.getElementById( "a"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]); <br>sx.activex .autocomplete.bind(document.getElementById("a1"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw" ]); <br></script>

The code is not optimized, please bear with me, here is an idea , making everyone laugh.