JQuery plug-in is similar to Baidu search box smart prompt (with Value) _ jquery

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.