jQuery 插件 仿百度搜索框智能提示 调用简单!
因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个.
直接贴代码。
(function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟文本框一样 maxheight: 150, //提示框的最大高度 top: 6, //与文本框的上下距离 url: "", //ajax 请求地址 type: "post", //ajax 请求类型 async: false, //是否异步请求 autoLength: 0, //文本长度大于0 就请求服务器 getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行 clearValue: function(){ }, //当重新请求时清空Value值 getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行 }; 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; //判断是否跟上一次的值相等, 考虑到用户正在打字 避免相同的值多次请求 } lastValue = c.val(); //记录请求值 options.clearValue(); //清空值 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, //控制同步 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){ //项的高度 对应样式表 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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery 仿百度提示框</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\":\"天天有限公司\",\"value\":\"2\"},{\"text\":\"明明有限公司\",\"value\":\"4\"},{\"text\":\"黄黄有限公司\",\"value\":\"4\"}]"; Response.Write(jsonArray); Response.End(); }
后台只需要返回json格式的 text 和 value值 就可以了。
$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器 append到另一个容器 事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。
var defaults = {
width: c.width(), //提示框的宽度 默认跟文本框一样
maxheight: 150, //提示框的最大高度
top: 6, //与文本框的上下距离
url: "", //ajax 请求地址
type: "post", //ajax 请求类型
async: false, //是否异步请求
autoLength: 0, //文本长度大于0 就请求服务器
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行
clearValue: function(){ }, //当重新请求时清空Value值
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行
};
好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~
