JQueryautocomplate self-extension plug-in, Automatic completion of sample code _ jquery-js tutorial

The jquery-lib version is 1.3.2. This plug-in is a simple extension plug-in, and the code is also relatively simple encapsulation. So it seems simple and not laborious, and of course it is not well encapsulated. The Code is as follows:

However, it is compatible with browsers. It has been tested to be compatible with IE6 + and Firefox3.5 +.
First take a look At autocomplate. js:
; (Function ($ ){
Var index =-1;
Var timeId;
Var cssOptions = {
"Border": "1px solid black ",
"Background-color": "white ",
"Position": "absolute "/*,
"Font": "normal lighter 14px 6px Times New Roman "*/
};
Var defaults = {
Width: "auto ",
HighlightColor: "# 3399FE ",
UnhighlightColor: "# FFFFFF ",
Css: cssOptions,
DataType: "xml ",
ParamName: "word ",
Delay: 500,
Max: 20
};
Var keys = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
ENTER: 13,
ESC: 27,
/* COMMA: 188 ,*/
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8,
A: 65,
Z: 90
};
$. Fn. extend ({
Autocomplete: function (sUrl, settings ){
SUrl = (typeof sUrl = "string ")? SUrl :"";
Var param =! This. attr ("id ")? Defaults. paramName: this. attr ("id ");
Settings = $. extend ({}, defaults, {url: sUrl, paramName: param}, settings );
Var autoTip = this. autoTipTemplate (this, settings );
$ ("Body"). append (autoTip );
Var $ this = this;
This. keyup (function (event ){
$ This. keyOperator (event, autoTip, settings );
});
/* $ ("Input [type = button]"). click (function (){
$ ("# Result"). text ("" + search. val () + "in the text box is submitted! ");
$ ("# Auto"). hide ();
Index =-1;
});*/
Return this. each (function (){
$ This. val ();
});
},
AutoTipTemplate: function (input, settings ){
Var inputOffset = input. offset ();
Var autoTip = $ ("

").Css(settings.css). hide ()
. Css ("top", inputOffset. top + input. height () + 5 + "px ")
. Css ("left", inputOffset. left + "px ");
Var space = $. browser. mozilla? 2: 6; // compatible with browsers
Var tipWidth = (typeof settings. width = "string" & "auto ")? Input. width (): settings. width;
AutoTip. width (tipWidth + space + "px ");
Return autoTip;
},
Select: function (target, index, settings, flag ){
Var color = flag? Settings. highlightColor: settings. unhighlightColor;
Target. children ("p" ).eq(index).css ("background-color", color );
},
KeyOperator: function (event, autoTip, settings ){
Var evt = event | window. event;
Var autoNodes = autoTip. children ("p ");
Var kc = evt. keyCode;
Var $ this = this;
/* When the user presses a letter, delete, or return key */
If (kc> = keys. A & kc <= keys. Z | kc = keys. BACKSPACE | kc = keys. DEL ){
Var wordText = this. val ();
If (wordText. length! = 0 ){
Var param = {};
Param [settings. paramName] = wordText;
ClearTimeout (timeId );
TimeId = setTimeout (function (){
$. Post (settings. url, param, function (data ){
Var wordObj = $ (data );
If (settings. dataType = "xml "){
Var wordNodes = wordObj. find ("word ");
AutoTip.html ("");
WordNodes. each (function (I ){
Var pNode = $ ("

"). Attr (" id ", I );
// Add the traversed word to the created p and append the p to auto.
PNode.html ($ (this). text (). appendTo (autoTip );
// The mouse has entered to add highlight
PNode. mousemove (function (){
// If the highlight already exists, remove the highlight and change it to white.
If (index! =-1 ){
AutoTip. children ("p" ).eq(index).css ("background-color", settings. unhighlightColor );
}
Index = $ (this). attr ("id ");
((This).css ("background-color", settings. highlightColor );
});
// Move the mouse out to cancel highlighting
PNode. mouseout (function (){
Background (this).css ("background-color", settings. unhighlightColor );
});
// Click the highlighted content
PNode. click (function (){
$ This. val ($ (this). text ());
Index =-1;
AutoTip. hide ();
});
});
If (wordNodes. length> 0 ){
AutoTip. show ();
} Else {
AutoTip. hide ();
Index =-1;
}
}
});
}, Settings. delay );
} Else {
AutoTip. hide ();
Index =-1;
}
} Else if (kc = keys. UP | kc = keys. DOWN) {/* when the user presses the UP/DOWN key */
If (kc = keys. UP) {// UP
If (index! =-1 ){
AutoNodes.eq(index).css ("background-color", settings. unhighlightColor );
Index --;
} Else {
Index = autoNodes. length-1;
}
If (index =-1 ){
Index = autoNodes. length-1;
}
AutoNodes.eq(index).css ("background-color", settings. highlightColor );
} Else {// down
If (index! =-1 ){
AutoNodes.eq(index).css ("background-color", settings. unhighlightColor );
}
Index ++;
If (index = autoNodes. length ){
Index = 0;
}
AutoNodes.eq(index).css ("background-color", settings. highlightColor );
}
} Else if (kc = keys. PAGEUP | kc = keys. PAGEDOWN ){
Event. preventDefault ();
If (kc = keys. PAGEUP ){
If (index! =-1 ){
AutoNodes.eq(index).css ("background-color", settings. unhighlightColor );
}
If (autoNodes. length> 0 ){
Index = 0;
AutoNodes.eq(0).css ("background-color", settings. highlightColor );
}
} Else {
If (index! =-1 ){
AutoNodes.eq(index).css ("background-color", settings. unhighlightColor );
}
Index = autoNodes. length-1;
AutoNodes.eq(index).css ("background-color", settings. highlightColor );
}
} Else if (kc = keys. ENTER ){
// Enter the Enter key
// Complete the information with highlighted content
If (index! =-1 ){
$ This. val (autoNodes. eq (index). text ());
} Else {// hide if no
$ ("Body"). append ($ ("

"). Text (" "+ $ this. val () +" in the text box is submitted! "));
$ This. get (0). blur ();
}
AutoTip. hide ();
Index =-1;
} Else if (kc = keys. ESC ){
AutoTip. hide ();
}
}
});
}) (JQuery );

Now let's analyze some common options of the above autocomplate plug-in:
Index is the index highlighted by the prompt option;
TimeId is the time that a user uses setTimeout to request the server to obtain data when entering text fields;
CssOptions is the style of the automatic prompt option. Some default styles are provided here;

The Code is as follows:

Var defaults = {
Width: "auto", // default or automatic width setting
HighlightColor: "# 3399FE", // color when highlighted
UnhighlightColor: "# FFFFFF", // non-highlighted color
Css: cssOptions,
DataType: "xml", // data type returned by ajax requests
ParamName: "word", // Parameter Name of the ajax request. If you have set the id of the text field, use this attribute.
Delay: 500, // how often does ajax request a server when text fields are continuously input?
};

Keys is the value corresponding to the keyboard key;
Autocomplete is the called function. You can set the url of the ajax request and configure the parameters in the above ults. This method returns the value of the text field;
AutoTipTemplate is the prompt box and prompt menu displayed during input. A jquery object is returned;
Select is the highlight option of the prompt menu, that is, the prompt menu. target is the target object, index is the index of the option to be highlighted, and settings is
Highlighted color configuration, which is available in default ults. The defaults object attribute is assigned to the settings object through the $. extend method;
KeyOperator is a keyboard operation for text fields, which is the core function. Operation prompts and Automatic completion depend on it;
Let's take a look at the html code to see how the autocomplate plug-in is called:

The Code is as follows:

Ajax example to implement Google search complementing