JQuery AutoComplete Auto-complete plug-in code application

Parameter url:baseurl, such as the PHP tutorial ">http://www.111cn.net/search.php
The list of suffixes for the parameter params:url, and the URL that is flattened in the example is: http://www.111cn.net/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 the web effects ONP to handle cross-domain problems.

How to use

jquery ("#kw"). Suggest ({
Url:siteconfig.suggestionurl,
params:{
Kw:function () {return jquery ("#kw"). Val ()},
N:10
}
});

Suguust. Web Effects

(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 tutorial (' 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 (' Mouseo tutorial ver ', function () {
//Lock hint layer, guaranteed not to bubble off hint layer
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, clear 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);