JQuery Autocomplete automatically completes plug-in code application

In the past, we developed ajax, which is used for custom development like google's Automatic completion function. Now jquery is much more convenient, and he provided us with jQuery Autocomplete Automatic completion plug-in code, let's take a look at the actual application of this Code.

In the past, we developed ajax, which is used for custom development like google's Automatic completion function. Now jquery is much more convenient, and he provided us with jquery autocomplete Automatic completion plug-in code, let's take a look at the actual application of this Code.

Parameter url: baseurl, for example php tutorial "> http://www.bKjia. c0m/search. php
Parameter params: url Suffix List, in the example of the combined url: http://www.bKjia. c0m/search. php? Kw = xxx & n = 10 & callback =? (Callback is added by default)
Parameter delay: the input interval, mainly to reduce the load. The larger the value, the lower the load, and the slower the query speed.
Parameter cache: Indicates whether to use the cache. The default value is true. For example, when "test" is searched, the program caches the corresponding query results and reads the results directly from the cache when the test is searched for the second time.
Parameter formid: required, form id
Callback: whether to use the webpage special effect onp to handle cross-origin issues.

Usage

Jquery ("# kw"). suggest ({
Url: siteconfig. suggestionurl,
Params :{
Kw: function () {return jquery ("# kw"). val ()},
N: 10
}
});

Suguust. webpage Effect

 

(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 );
// Initialize the value of backval When Triggering the focus
Backval = (backval = $. trim (self. val () = ''? Null: backval;
})
. Bind ("blur", function (){
Clearinterval (searchtimer );
Searchtimer = 0;
Hideresult ();
})
. Bind ("keydown", function (e ){
// No switch is used for less than 10 items
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 );
}
});

// Obtain keywords
Function getkey (){
Val = $. trim (self. val ());
// Keywords are not empty and repeated
If (!! Val & val! = Backval ){
Backval = val;
// Set the cache to false If no result is cached.
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 ();
}
}

// Obtain the 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 prompt 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 ('lil'). bind ('mouseo tutorial upload', function (){
// Lock the prompt layer to ensure that the prompt layer is not closed due to 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, clear the prompt layer.
Rebox. hide ();
}
}

Function changeselect (index, v ){
V = false? False: true;
Var obj = rebox. find ('lil'). eq (index );
Rebox. find ('Li. M'). removeclass ('M ');
Obj. addclass ("mo ");
If (v ){
Chosekey = backval = obj.html ();
Self. val (chosekey );
}
}

Function reset (){
If (!! Self. val ()){
Index =-1;
Certificate ('{suggest'}.css ('display', 'block ');
Rebox. find ('Li. M'). removeclass ('M ');
// Re-calculate the prompt result Length Based on the html Structure
Rlen = rebox. find ('lil'). size ();
}
}

Function hideresult (){
If (! Locksuggest ){
Chosekey = backval = null;
Hidden = true;
Rebox. hide ();
}
}

Function searchsubmit (){
Self. val (chosekey );
Hideresult ();
Clearinterval (searchtimer );
Formobj. submit ();
}

});
}
}) (Jquery );