jQuery 插件仿百度搜索框智能提示(带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 = $('<p id="autocomplete_group"></p>');
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_p);
d.bind("mouut", 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; //判断是否跟上一次的值相等, 考虑到用户正在打字 避免相同的值多次请求
}
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_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){ //项的高度 对应样式表 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.x" });
});
</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){ } //当回车 或 鼠标点击选中值的时候执行
};
好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~
下一篇： 原生JS实现简单的倒计时功能示例