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

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.
Paste the Code directly.
Copy codeThe 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 = $ ('<div id = "autoComplete_Group"> </div> ');
C. after (d );
D.css ({"left": p. left, "top": p. top + c. height () + options. top, "width": options. width, "max-height": options. maxheight });
T = $ ('<table cellspacing = "0" cellpadding = "2"> </table> ');
D. append (t );
D. append ('<input style = "display: none"/> ');
C. bind ("keydown", keydown_process );
C. bind ("keyup", keyup_process );
C. bind ("blur", blur_process );
D. bind ("focus", focus_div );
D. bind ("mouseout", mouseout_div );
}
Function blur_process ()
{
Timeid = setTimeout (function (){
D. hide ();
},200 );
}
Function mouseout_div ()
{
T. find (". nowRow"). removeClass ("nowRow ");
}
Function focus_div ()
{
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 ('<tr> <td>' + this. text + '<input type = "hidden" value = "' + this. value + '"/> </td> </tr> ');
});
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_div );
D. bind ("mouseout", mouseout_div );
}
$. 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 );

Copy codeThe 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;
}

Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> jQuery imitation Baidu prompt box </title>
<Script src = "/js/jquery. js" type = "text/javascript"> </script>
<Link href = "/js/autoComplete/autoComplete.css" rel = "stylesheet" type = "text/css"/>
<Script src = "/js/autoComplete/jquery. autoComplete. js" type = "text/javascript"> </script>
<Script type = "text/javascript" language = "javascript">
$ (Document). ready (function (){
$ ("# Txt_company"). autoComplete ({url: "ajax. aspx "});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Input id = "txt_company" type = "text" style = "width: 468px;"/>
</Form>
</Body>
</Html>

Copy codeThe Code is as follows:
Protected void Page_Load (object sender, EventArgs e)
{
String keyword = Request ["txt_company"];
String jsonArray = "[{\" text \ ": \" Daily Co., Ltd. \ ", \" value \ ": \" 2 \ "},{ \" text \": \ "clearly limited company \", \ "value \": \ "4 \" },{ \ "text \": \ "Yellow limited company \", \ "value \": \ "4 \"}] ";
Response. Write (jsonArray );
Response. End ();
}

The background only needs to return the text and value values in json format.
$. Fn. resetEvent (); this method is used to re-bind events. For example, if an event is lost from one container append to another container, you can use this method to re-bind events after append. The following are some parameters.
Copy codeThe Code is as follows:
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
};

Okay. The only drawback is that when you click an item, you can hide the drop-down box without having to hide it. For more information, see my code. You can change it if you have the ability ~