I recently wrote a javascript framework and saw many forms that automatically completed functions on the Internet. So I wrote one in javascript. For more information, see writing a javascript framework recently, I saw many forms that automatically completed functions on the Internet, so I wrote one in javascript to add some color to my framework.
Procedure:
1. Input two parameters. The first is the form object to be bound, and the second is the array to be retrieved.
2. dynamically create a p layer as the layer you want to automatically complete, Set Properties and events (I have not set the visible and display Properties of p here, instead, it sets its left to "-1000px", which removes the browser and achieves the hidden effect.
3. retrieves the input array, finds items that match or are similar to the input content, and stores them in a new array. here, we have performed four iterations using regular expressions, but it is not easy to write. Sorry.
4. process the new array storing the retrieved data, remove the items with duplicate content, and write it into p.
5. Set left, top, and width of p.
The complete code shown below:
The Code is as follows:
If (! Sx)
Var sx = {};
Sx. activex = {};
Sx. activex. autocomplete = {
Bind: function (a, s ){
Var d = document. createElement ("p ");
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 If (t [e2]) {
T [e2-1] = t [e2];
}
}
T. length = t. length-1;
}
}
}
// Alert (t );
For (var I in t ){
Var p = document. createElement ("p ");
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:
The Code is as follows:
Untitled Document