JQuery Plug-in imitation Baidu search box Intelligent tip (with value) _jquery

Because the company needs to do a imitation Baidu search box, and with value, the internet looked for the next only text, did not bring value, so did a.
Paste the code directly.

Copy Code code 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 defaults to the text box
maxheight:150,//maximum height of the prompt box
Top:6,//up and down distance from the text box
URL: "",//ajax request address
Type: "POST",//ajax request type
Async:false,//whether to request asynchronously
autolength:0,//text length greater than 0 request server
Getvalue:function (value) {},///when a carriage return or mouse clicks on the selected value is performed
Clearvalue:function () {},//empty value when re-request
Gettext:function (text) {}//when a carriage return or mouse clicks on 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 = = | | e.keycode = | | e.keycode = | | e.keycode = = | | e.keycode = 39) {
Return
}
if (C.val (). length > Options.autolength) {
if (c.val () = = Lastvalue) {
Return Determine if 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 Request value
Options.clearvalue (); Empty values
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 sheet TD height:25px
$ (this). scrolltop (0);
}
}
}
}) (JQuery);

Copy Code code 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 Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery imitation Baidu Tip 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>
<body>
<form id= "Form1" runat= "Server" >
<input id= "Txt_company" type= "text" style= "width:468px"/>
</form>
</body>

Copy Code code as follows:

protected void Page_Load (object sender, EventArgs e)
{
string keyword = request["Txt_company"];
String Jsonarray = "[{\ text\": \ "daily Company limited \", "value\": \ "2\"},{\ "text\": \ "mingming limited \", "value\": \ "4\"},{\ "text\": \ " Yellow Co., ltd. \ ", \" value\ ": \" 4\ "}]";
Response.Write (Jsonarray);
Response.End ();
}

The background only needs to return the JSON-formatted text and value.
$.fn.resetevent (); This method is to rebind events, such as append from one container to another, and the event is lost, append can be used to rebind the event. Here are some parameters.

Copy Code code as follows:

var defaults = {
Width:c.width (),//The width of the prompt box defaults to the text box
maxheight:150,//maximum height of the prompt box
Top:6,//up and down distance from the text box
URL: "",//ajax request address
Type: "POST",//ajax request type
Async:false,//whether to request asynchronously
autolength:0,//text length greater than 0 request server
Getvalue:function (value) {},///when a carriage return or mouse clicks on the selected value is performed
Clearvalue:function () {},//empty value when re-request
Gettext:function (text) {}//when a carriage return or mouse clicks on the selected value
};

All right. The only disadvantage is that the mouse click on the item when not loose the meeting hidden fall pull box, the specific look at my code, the ability can be changed ~