jquery Auto-Complete plug-in source code

Source: Internet
Author: User
Tags tagname

/*
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.