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