<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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;line-height:25px;margin:0;padding:0;}
. AutoComplete ul{z-index:99;padding:0px;margin:0px;border:1px #333 Solid;width:200px;background:white;display: none;position:absolute;left:0;top:28px;}
. AutoComplete Li{list-style:none;}
. AutoComplete Li a {display:block;color: #000; text-decoration:none;padding:1px 0 1px 5px;}
. AutoComplete li a:hover {color: #000; background: #ccc; border:none;}
</style>
<script type= "Text/javascript" src= ". /javascript/lib/jquery-1.4.2.min.js "></script>
<script type= "Text/javascript" src= ". /javascript/autocomplete.js "></script>
<body>
<div class= "AutoComplete" > <input value= "input"/> <ul><li></li></ul> </div >
<div class= "AutoComplete" > <input value= "input"/> <ul><li></li></ul> </div >
<div class= "AutoComplete" > <input value= "input"/> <ul><li></li></ul> </div >
<div class= "AutoComplete" > <input value= "input"/> <ul><li></li></ul> </div >
</body>
;(function ($) {
* Plugin * *
$.fn.autocomplete=function (o) {
if (O.ajax) o.ajax=$.extend ({url: ', DataType: ' JSON ', async:true}, o.ajax| | {});
O.elemcss=$.extend ({focus:{' color ': ' #f00 '}, blur:{' color ': ' #000 '}}, o.elemcss| | {});
O=$.extend ({
source:null,/* privide an array for match * *
ajax:{},/* provide an AJAX conditions, if source is exist this parameter is invalid/*
Input: ' input ',/* provide the selector of input box * *
Popup: ' UL ',/* provide the selector of popup box, it must be a UL element of HTML * *
elemcss:{}/* provide the focus and blur CSS objects of items in the popup box * *
},o| | {});
var handler= (function () {
var handler=function (e,o) {return new handler.prototype.init (e,o);};
handler.prototype={
E:null, O:null, Timer:null, show:0, $input: null, $popup: null,
Init:function (e,o) {
this.e=e;
This.o=o;
this. $input =$ (THIS.O.INPUT,THIS.E);
this. $popup =$ (THIS.O.POPUP,THIS.E);
This.initevent ();
},
Match:function (Quickexpr,value,source) {
for (var i in source) {
if (value.length>0 && quickexpr.exec (source[i))!=null)
this. $popup. Append (' <li><a href= "javascript:;" > ' +source[i]+ ' </a></li> ');
}
if ($ (' Li a ', this. $popup [0]). length) {this. $popup. Show ();} else{this. $popup. Hide ();
},
Fetch:function (ajax,search,quickexpr) {
var that=this;
$.ajax ({
Url:ajax.url+search,
DataType:ajax.dataType,
Async:ajax.async,
Error:function (data,es,et) {alert (' Error ');},
Success:function (data) {That.match (quickexpr,search,data);}
});
},
Initevent:function () {
var that=this;
this. $input. focus (function () {
var value=this.value, Quickexpr=regexp (' ^ ' +value, ' I '), self=this;
That.timer=setinterval (function () {
if (Value!=self.value) {
Value=self.value;
that. $popup. HTML (");
if (value!= ') {
Quickexpr=regexp (' ^ ' +value);
if (That.o.source) That.match (Quickexpr,value,that.o.source);
else if (That.o.ajax) That.fetch (that.o.ajax,value,quickexpr);
}
}
},200);
}). blur (function () {
Clearinterval (That.timer);
var current=-1;
var len=that. $popup. Find ("Li a"). Length-1;
$ ("Li a", that. $popup [0]). Click (function () {
that. $input [0].value=$ (This). text ();
that. $popup. HTML ('). Hide ();
). focus (function () {
Current = $ (this). Parent (). index ();
$ (this). CSS (That.o.elemcss.focus);
}). blur (function () {
$ (this). CSS (That.o.elemcss.blur);
});
$ ("Li a", that. $popup [0]). KeyDown (function (event) {
if (event.keycode==40) {
current++;
if (current<0) Current=len;
if (Current>len) current=0;
That's $popup. Find ("Li a").
}else if (event.keycode==38) {
current--;
if (Current>len) current=0;
if (current<0) Current=len;
That's $popup. Find ("Li a").
}
});
}). KeyDown (function (event) {
if (event.keycode==40) {
$popup. blur (). Find ("Li a"). Get (0). focus ();
}
});
$ (THIS.E). Hover (function () {that.show=1;},function () {that.show=0;});
$ (document). Click (function () {if (that.show==0) {that. $popup. Hide ();}});
}
};
handler.prototype.init.prototype=handler.prototype;/* JQuery Style * *
return handler;
})();
Return This.each (function () {handler (this,o);});
};
/* Invoke * *
$ (document). Ready (function () {
$ (". AutoComplete"). AutoComplete ({
SOURCE:[123,1234,43563,12346,3464564,3454,7567,956,456,9383,893,999],
ajax:{URL: './php/fetch.php?search= ', DataType: ' JSON ', async:false},
elemcss:{focus:{' color ': ' #0f0 '}, blur:{' color ': ' #f00 '}}
});
});
* Conclude * *
}) (JQuery);
When invoked, an AJAX request was commented, it returned a JSON data, I tested it with a PHP read database, if necessary, the code was as follows:
