Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> autoComplete </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
. AutoComplete {margin: 8px; position: relative; float: left ;}
. AutoComplete input {width: 200px; height: 25px; margin: 0; padding: 0; line-height: 25px ;}
. AutoComplete ul {z-index:-12; padding: 0px; margin: 0px; border: 1px #333 solid; width: 200px; background: white; display: none; position: absolute; left: 0; top: 28px; * margin-left: 9px; * margin-top: 2px; margin-top: 1px ;}
. AutoComplete li {list-style: none ;}
. AutoComplete li a {display: block; color: #000; text-decoration: none; padding: 1px 0 1px 5px; _ width: 97% ;}
. AutoComplete li a: hover {color: #000; background: # ccc; border: none ;}
</Style>
<Script type = "text/javascript">
// <! [CDATA [
Var getElementsByClassName = function (searchClass, node, tag) {/* compatible with the method of selecting the class of Each browser; (: http://www.jb51.net, want to know more please refer to this address )*/
Node = node | document, tag = tag? Tag. toUpperCase ():"*";
If (document. getElementsByClassName) {/* supports the getElementsByClassName browser */
Var temp = node. getElementsByClassName (searchClass );
If (tag = "*"){
Return temp;
} Else {
Var ret = new Array ();
For (var I = 0; I <temp. length; I ++)
If (temp [I]. nodeName = tag)
Ret. push (temp [I]);
Return ret;
}
} Else {/* does not support the getElementsByClassName browser */
Var classes = searchClass. split (""),
Elements = (tag = "*" & node. all )? Node. all: node. getElementsByTagName (tag ),
Patterns = [], returnElements = [], current, match;
Var I = classes. length;
While (-- I> = 0)
Patterns. push (new RegExp ("(^ | s)" + classes [I] + "(s | $ )"));
Var j = elements. length;
While (-- j> = 0 ){
Current = elements [j], match = false;
For (var k = 0, kl = patterns. length; k <kl; k ++ ){
Match = patterns [k]. test (current. className );
If (! Match) break;
}
If (match) returnElements. push (current );
}
Return returnElements;
}
};
Var addEvent = (function () {/* use this function to add events to prevent event overwriting */
If (document. addEventListener ){
Return function (type, fn) {this. addEventListener (type, fn, false );};
} Else if (document. attachEvent ){
Return function (type, fn ){
This. attachEvent (on + type, function (){
Return fn. call (this, window. event);/* compatible with IE */
});
};
}
})();
; (Function (window ){
/* Start plug-in */
Var autoComplete = function (o ){
Var handler = (function (){
Var handler = function (e, o) {return new handler. prototype. init (e, o) ;};/* Create a corresponding object for each selected dom. This makes it easy to use multiple dom */
Handler. prototype = {
E: null, o: null, timer: null, show: 0, input: null, popup: null,
Init: function (e, o) {/* set the initial object */
This. e = e, this. o = o,
This. input = this. e. getElementsByTagName (this. o. input) [0],
This. popup = this. e. getElementsByTagName (this. o. popup) [0],
This. initEvent ();/* initialize various events */
},
Match: function (quickExpr, value, source) {/* generate prompt */
Var li = null;
For (var I in source ){
If (value. length> 0 & quickExpr.exe c (source [I])! = Null ){
Li = document. createElement (li );
Li. innerHTML = <a href = "javascript:;"> + source [I] + </a>;
This. popup. appendChild (li );
}
}
If (this. popup. getElementsByTagName (a). length)
This. popup. style. display = block;
Else
This. popup. style. display = none;
},
& N