Because the company needs to make a search box that imitates Baidu and has a Value, only Text is found on the Internet, so there is no Value, so I made a simple comment on the code, the structure is very clear and easy to understand. If you are interested, you can understand that the company needs to make a search box that is similar to Baidu and has a Value, and only Text is found online, it does not contain any Value.
Paste the Code directly.
The Code is as follows:
(Function ($ ){
Var timeid;
Var lastValue;
Var options;
Var c;
Var d;
Var t;
$. Fn. autoComplete = function (config ){
C = $ (this );
Var defaults = {
Width: c. width (), // The width of the prompt box is the same as that of the text box by default.
Maxheight: 150, // the maximum height of the prompt box
Top: 6, // the upper and lower distance from the text box
Url: "", // ajax request address
Type: "post", // ajax request type
Async: false, // whether the request is asynchronous
AutoLength: 0, // request the server if the text length is greater than 0
GetValue: function (value) {}, // run when you press ENTER or click the selected value
ClearValue: function () {}, // clear the Value when a new request is made
GetText: function (text) {}// run when you press ENTER or click the selected value
};
Options = $. extend (defaults, config );
Var p = c. position ();
D = $ ('
');
C. after (d );
D.css ({"left": p. left, "top": p. top + c. height () + options. top, "width": options. width, "max-height": options. maxheight });
T = $ ('
');
D. append (t );
D. append (' ');
C. bind ("keydown", keydown_process );
C. bind ("keyup", keyup_process );
C. bind ("blur", blur_process );
D. bind ("focus", focus_p );
D. bind ("mouseout", mouseout_p );
}
Function blur_process ()
{
Timeid = setTimeout (function (){
D. hide ();
},200 );
}
Function mouseout_p ()
{
T. find (". nowRow"). removeClass ("nowRow ");
}
Function focus_p ()
{
ClearTimeout (timeid );
C. focus ();
}
Function keydown_process (e)
{
If (d. is (": hidden ")){
Return;
}
Switch (e. keyCode)
{
Case 38:
E. preventDefault ();
Var p = t. find (". nowRow"). prev ();
If (p. length> 0 ){
D. setScroll (options. maxheight, p );
P. mouseover ();
} Else {
P = t. find ("tr: last ");
If (p. length> 0 ){
D. setScroll (options. maxheight, p );
P. mouseover ();
}
}
Break;
Case 40:
E. preventDefault ();
Var n = t. find (". nowRow"). next ();
If (n. length> 0 ){
D. setScroll (options. maxheight, n );
N. mouseover ();
} Else {
N = t. find ("tr: first ");
If (n. length> 0 ){
D. setScroll (options. maxheight, n );
N. mouseover ();
}
}
Break;
Case 13:
E. preventDefault ();
Var n = t. find (". nowRow ");
If (n. length> 0 ){
Options. getValue (n. find ("input: hidden"). val ());
C. val (n. text ());
Options. getText (c. val ());
LastValue = "";
D. hide ();
}
Break;
}
}
Function keyup_process (e)
{
If (e. keyCode = 38 | e. keyCode = 40 | e. keyCode = 13 | e. keyCode = 37 | e. keyCode = 39 ){
Return;
}
If (c. val (). length> options. autoLength ){
If (c. val () = lastValue ){
Return; // determine whether the value is equal to the previous one. Considering that the user is typing to avoid multiple requests with the same value
}
LastValue = c. val (); // record the request Value
Options. clearValue (); // clear the value
GetData (c, function (data ){
If (data. length = 0 ){
D. hide ();
Return;
}
T. find ("tr"). remove ();
$. Each (data, function (){
T. append (''+ This. text +' ');
});
Var rows = t. find ("tr ");
Rows. mouseover (function (){
T. find (". nowRow"). removeClass ("nowRow ");
$ (This). addClass ("nowRow ");
});
Rows. click (function (){
Options. getValue ($ (this). find ("input: hidden"). val ());
C. val ($ (this). text ());
Options. getText (c. val ());
LastValue = "";
D. hide ();
});
C. setPosition ();
D. show ();
});
} Else {
LastValue = "";
D. hide ();
}
}
Function getData (o, process)
{
$. Ajax ({
Type: options. type,
Async: options. async, // control Synchronization
Url: options. url,
Data: o. attr ("id") + "=" + o. val (),
DataType: "json ",
Cache: false,
Success: process,
Error: function (err ){
Alert (err );
}
});
}
$. Fn. resetEvent = function ()
{
C. bind ("keydown", keydown_process );
C. bind ("keyup", keyup_process );
C. bind ("blur", blur_process );
D. bind ("focus", focus_p );
D. bind ("mouseout", mouseout_p );
}
$. Fn. setPosition = function ()
{
Var p = c. position ();
D.css ({"left": p. left, "top": p. top + c. height () + options. top });
}
$. Fn. setScroll = function (h, o)
{
Var offset = o. offset ();
If (offset. top> h ){
$ (This). scrollTop (offset. top-h );
} Else {
If (offset. top <25) {// The height of the item corresponds to the style table td height: 25px
$ (This). scrollTop (0 );
}
}
}
}) (JQuery );
The Code is as follows:
# AutoComplete_Group {
Border: 1px solid #817F82;
Position: absolute;
Overflow-y: auto;
Overflow-x: hidden;
Display: none;
}
# AutoComplete_Group table {
Background: none repeat scroll 0 0 # FFFFFF;
Cursor: default;
Width: 100%;
}
# AutoComplete_Group td {
Color: #000000;
Font: 14px/25px arial;
Height: 25px;
Padding: 0 8px;
}
# AutoComplete_Group. nowRow {
Background-color: # EBEBEB;
}
The Code is as follows:
JQuery-like Baidu prompt box
