/*
Auto-complete plug-in
*/
!function ($) {
$.fn.extend ({
Autocomplete:function (Arr,max) {
return new $. Autocomplete (This,arr,max);//If so, first generate a
}
});
constructor function
$. Autocomplete = function (Input,arr,max) {
This.option = {};
This.option.data = arr;//Data
This.option.max = max;
This.input = input;
This.init (This,input);
};
Initializing the build panel
$. Autocomplete.prototype.init = function (obj,input) {
var left = Input.offset (). Left;
var top = Input.offset (). Top +input.height () +5;//get the positioning of the Fill box
var width = input.width () +2;//Get width
OBJ.UL = $ ("<ul/>"). AddClass ("Autoulcss");
Obj. Panel = $ ("<div/>"). CSS ({"Left": Left, "top": Top, "width": width}). addclass ("Maincss"). Append (obj.ul[0]);// Create a div and set the style;
$ ("Body"). Append (obj. Panel[0]);
Bindinputevent (Obj,obj.option.data);
}
Generate columns
$. Autocomplete.prototype.render = function (obj,data) {
Body ...
Obj.ul.empty ();//Clear First
if (!data instanceof array| | Data.length <=0) {
If the data is not an array
Return
}
else {
var length = Data.length;
var KeyWord = Obj.input.val ();//Keywords entered
for (var i = 0; i < length; i++) {
var li = $ ("<li/>"). AddClass ("Autolicss");
var Textfirst = "", textlast= "";//front and back data
var index = data[i].indexof (KeyWord);//
Textfirst = Data[i].substr (0,index);
Textlast = Data[i].substr (index+keyword.length,data[i].length);
Li.html (textfirst+ "<strong>" +keyword+ "</strong>" +textlast ");
Obj.ul.append (Li[0]);
};
}
}
Show current item
$. Autocomplete.prototype.show = function () {
Body ...
This. Panel && this. Panel.show ();
}
Hide Current Item
$. Autocomplete.prototype.hide =function () {
Body ...
This. Panel&&this. Panel.hide ();
}
Destroying objects
$. Autocomplete.prototype.destory = function () {
Body ...
This. Panel.remove ();
This. Panel = null;
This.option = {};
}
Match data based on input text
function Matchdata (obj,data,input) {
Body ...
var result = [];
var txt =$.trim (Input.val ());//Input text
if ($.trim (txt) = = "") {obj.hide (); return [];}
var length = Data.length;
for (var i = 0; I <length; i++) {
var indexdata = data[i];//line I data
if (Indexdata.touppercase (). IndexOf (Txt.touppercase ()) >=0) {//Match data
Result.push (Indexdata);
}
};
return result;//to get filtered data
}
Bind the selected data back to the input box
function Filldata (obj,text) {
Obj.input.val (text);
Obj.hide ();
}
Events that bind text boxes
function Bindinputevent (obj,data) {
Current text Change Event
Obj.input.bind ("KeyUp", function (event) {
Body ...
var currentindex = Obj.ul.find ("Li.autolicsscurrent"). index ();
if (Event.which = =) {//up
if (Currentindex = = 0| | Currentindex = =-1) {
Setseleteditem (obj, "Max");
}
else {
Setseleteditem (obj,currentindex-1);
}
}
else if (Event.which = =) {//down
if (Currentindex = = Obj.ul.find ("Li"). length-1| | Currentindex = =-1) {
Setseleteditem (obj,0);
}
else {
Setseleteditem (obj,currentindex+1);
}
}
else if (Event.which = = = | | event.which = = 108) {//enter
Filldata (obj, Obj.ul.find ("Li.autolicsscurrent"). Text ());//Data binding back
Event.preventdefault ();
}
else if (Event.which = =) {//escape
Obj.hide ();
Event.preventdefault ();
}
else {
var matchdataresult = Matchdata (obj,data,obj.input);
if (!matchdataresult instanceof array| | Matchdataresult.length <=0) {
If the data is not an array
Obj.hide ();//Hide Results
Return
}
Obj.render (Obj,matchdataresult);//Generate Columns
Obj.show ();//Display results
}
})
Binding Li's Mouse events
Obj.ul.bind ("click", Function (event) {
var target = Geteventtarget (event);
if (target.tagName.toLowerCase () = = ' Li ') {
If it is Li, bind the data back
Filldata (obj,$ (target). text ());//Data binding back
}
}). bind ("MouseOver", function (event) {
var target = Geteventtarget (event);
Obj.ul.find ("Li.autolicsscurrent"). attr ("Class", "autolicss");//Restore Original selected
if (target.tagName.toLowerCase () = = ' Li ') {
If it is Li, bind the data back
$ (target). attr ("Class", "autolicsscurrent");//Selected items
}
});
}
Set keyboard up and down check events
function Setseleteditem (obj,index) {
Obj.ul.find ("Li.autolicsscurrent"). attr ("Class", "autolicss");//Restore Original selected
if (typeof index = = "string" && index== "Max") {
var maxLength = obj.ul.find ("Li"). length;//last Li
Obj.ul.find ("Li"). EQ (maxLength-1). attr ("Class", "autolicsscurrent");//Selected items
}
else {
Obj.ul.find ("Li"). EQ (index). attr ("Class", "autolicsscurrent");//Selected items
}
}
Gets the current event object matching IE
function Geteventtarget (e) {
E = e | | window.event;
return E.target | | E.srcelement;
}
} (JQuery);
jquery Auto-Complete plug-in source code