JQuery AutoComplete Auto-Complete plugin _jquery

Source: Internet
Author: User
Compared to similar plug-ins, his characteristics are 3 points.
1, can be cached query results (two times faster query)
2, KeyUp monitoring mode (to solve some system/situation can not trigger keyxxx events)
3, concise parameters (good-looking?) )

Plug-in performance is good, my E6500, 2G memory, in 30 seconds, a total of 4,469 calls, time consuming 94.65 milliseconds; Baidu is 2,432 calls, 80.24 milliseconds.

Nearly 1 time times the call is a problem in jquery, but the specific reason I haven't figured out, if the brother knows also please comment.

Call method

Copy Code code as follows:

JQuery ("#kw"). Suggest ({
URL:SITECONFIG.SUGGESTIONURL,
params:{
Kw:function () {return jQuery ("#kw"). Val ()},
N:10
}
});

Parameter url:baseurl, such as http://www.target.com/search.php
The list of suffixes for the parameter params:url, and the URL that is flattened in the example is: http://www.target.com/search.php?kw=xxx&n=10&callback=? (default join Callback)
Parameter delay: input interval time, mainly in order to reduce load, the larger the number, the lower the load, the slower the query speed.
Parameter cache: Is the utility cache, default is true, for example, when searching for "test", the program caches the corresponding query results and reads it directly from the cache when the second search test is applied.
Parameter formid: must be filled in, form form ID
Parameter callback: whether to use JSONP to handle cross-domain problems.
Core code:
Suggest.js
Copy Code code as follows:

(function ($) {
$.tools = $.tools | | {version: ' 1.0 '};
$.tools.suggest = {};
$.tools.suggest.defaults = {
Url:null,
Params:null,
DELAY:100,
Cache:true,
Formid: ' #search_form ',
Focus:null,
Callback:true
}
$.tools.suggest.borderkey = {
Up:38,
DOWN:40,
Tab:9,
Esc:27,
Enter:13
}

$.fn.suggest=function (OPTIONS,FN) {
var options,key = $.tools.suggest.borderkey;
if ($.isfunction (options)) {
Fn=options;
Options = $.extend ({}, $.tools.suggest.defaults, key);
}else{
Options = $.extend ({}, $.tools.suggest.defaults, key, options);
}
Return This.each (function () {
Var
Self = $ (this),
url = options.url,
params = Options.params,
Searchurl = NULL,
Searchtimer = 0,
Delay = Options.delay,
cache = Options.cache,
callback = Options.callback,
Formobj = $ (options.formid),
Focus = Options.focus,
Rebox = $ (' <ul/> '). attr ("id", "suggest"),
Htmlli = NULL,
Litop = NULL,
Lileft = NULL,
Liwth = NULL,
tip = False,
val = null,
Rlen = NULL,
up = options. Up,
Down = options. Down,
TAB = options. TAB,
ESC = options. Esc
ENTER = options. ENTER,
index =-1,
Chosekey = NULL,
Backval = NULL,
Hidden = False,
Locksuggest = False


Init
if (focus) {
Self.focus ();
Searchtimer = setinterval (getkey, delay);
}
Self.bind ("Focus", function () {
Searchtimer = setinterval (getkey, delay);
Initializes the value of the backval when the focus is triggered
Backval = (Backval=$.trim (Self.val ())) = = "? Null:backval;
})
. Bind ("Blur", function () {
Clearinterval (Searchtimer);
Searchtimer = 0;
Hideresult ();
})
. Bind ("KeyDown", function (e) {
Less than 10 items do not use switch
if (E.keycode = up) {
Clearinterval (Searchtimer);
Searchtimer = 0;
if ($ (' #suggest '). CSS (' display ') = = ' None ') {
ReSet ();
return false;
}
index--;
if (index<0) {
Index=math.abs (Rlen)-1;
}
Changeselect (index);
E.preventdefault ();
return false;
}else if (E.keycode = down) {
Clearinterval (Searchtimer);
Searchtimer = 0;
if ($ (' #suggest '). CSS (' display ') = = ' None ') {
ReSet ();
return false;
}
index++;
if (Index>=rlen) {
index=0;
}
Changeselect (index);
E.preventdefault ();
return false;
}else if (E.keycode = TAB) {
Clearinterval (Searchtimer);
Searchtimer = 0;
Hideresult ();
}else if (E.keycode = = ESC) {
Clearinterval (Searchtimer);
Searchtimer = 0;
Hideresult ();
return false;
}else if (E.keycode = = ENTER) {
Clearinterval (Searchtimer);
Searchtimer = 0;
}else if (Searchtimer = = 0) {
Searchtimer = setinterval (getkey, delay);
}
});

Get keywords
function Getkey () {
val = $.trim (Self.val ());
Keywords are not empty and the keywords are not duplicated
if (!! Val && val!=backval) {
Backval = val;
If cache result is not required, set cache to False
if (Cache &&!! $.tools.suggest[val]) {
index =-1;
Rlen = $.tools.suggest[val][1];
Appendsuggest ($.tools.suggest[val][0]);
}else{
Searchurl = url+ '? ' +$.param (params);
GetResult (Searchurl,function (Htmltemp,htmllen) {
index =-1;
Rlen = Htmllen;
Appendsuggest (htmltemp);
});
}
}
The keyword is empty
if (!!! Val &&!hidden) {
Hideresult ();
}
}

Get Prompt data
function GetResult (SEARCHURL,FN) {
if (callback) {Searchurl = searchurl+ ' &callback=? ';}
$.getjson (searchurl,function (data) {
var htmltemp = ',
Htmllen = 0,
Inputword = Self.val ()

$.each (Data.list,function (i,n) {
if (N.word!= Inputword) {
Htmltemp + = ' <li> ' +n.word+ ' </li> ';
htmllen++;
}
});
if (Cache &&!!! $.tools.suggest[val]) {$.tools.suggest[val]=[htmltemp,htmllen];}
Fn.call (Document,htmltemp,htmllen)
});
}

Insert hint data
function Appendsuggest (Result) {
Locksuggest = hidden = false;
if (!! Result) {
if (!tip) {
Litop = Self.offset (). Top+self.outerheight ()-1;
Lileft = Self.offset (). Left;
Liwth = Self.outerwidth ()-2;
Rebox.css ({' position ': ' absolute ', ' top ': litop, ' left ': lileft, ' width ': liwth}). html (Result). Appendto ("Body"). Show ( );
tip = true;
}else{
Rebox.html (Result), show ();
}
Rebox.find (' Li '). bind (' MouseOver ', function () {
Lock the hint layer to ensure that the hint layer is not closed by bubbling
Locksuggest = true;
Index = $ (this). index ();
Changeselect (Index,false);
})
. bind (' click ', function () {
Changeselect (index);
Searchsubmit ();
});
Rebox.bind (' Mouseout ', function () {
Locksuggest = false;
})
}else{
If the search result is empty, empty the hint layer
Rebox.hide ();
}
}

function Changeselect (index,v) {
V=v==false?false:true;
var obj = rebox.find (' li '). EQ (index);
Rebox.find (' Li.mo '). Removeclass (' Mo ');
Obj.addclass ("Mo");
if (v) {
Chosekey = Backval = obj.html ();
Self.val (Chosekey);
}
}

function ReSet () {
if (!! Self.val ()) {
index =-1;
$ (' #suggest '). CSS (' Display ', ' block ');
Rebox.find (' Li.mo '). Removeclass (' Mo ');
Recalculate hint result length based on HTML structure
Rlen = rebox.find (' li '). Size ();
}
}

function Hideresult () {
if (!locksuggest) {
Chosekey = Backval = null;
Hidden = true;
Rebox.hide ();
}
}

function Searchsubmit () {
Self.val (Chosekey);
Hideresult ();
Clearinterval (Searchtimer);
Formobj.submit ();
}

});
}
}) (JQuery);

Code package download

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.