欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 插件仿百度搜索框智能提示(带Value值)

程序员文章站 2022-06-11 11:05:32
代码如下: (function($) { var timeid; var lastvalue; var options; var c; var d; var t; $.fn.autocomplete...

代码如下:

(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){ } //当回车 或 鼠标点击选中值的时候执行
};


好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~