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

2020-05-23 06:18:16易采站长站整理

}
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”>