| (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);
#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;
}
<! 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>
</head>
<body>
<form id= "Form1" runat= "Server" >
<input id= "Txt_company" type= "text" style= "width:468px"/>
</form>
</body>
</html>
protected void Page_Load (object sender, EventArgs e)
{
string keyword = request["Txt_company"];
String Jsonarray = "[{] text": "Every day Limited Company", "Value": "2"},{"text": "Mingming Limited", "Value": "4"},{"text": "Yellow Yellow Co., Ltd.", "Value": "4"}] ";
Response.Write (Jsonarray);
Response.End ();
} |
