1.定义一个文本框:
<input type="text" class="txtW95" id="produ" />
<div id="searchresult" style="display: none;position:absolute;top:22px;left:0;width: 250px;
z-index:9999;overflow: hidden;background: #E0E0E0;border-top: none;"> </div>
2.在文本框下面设置一个显示区域。样式设置为默认不显示,位置绝对,z-index设置大些位于前端
3.填充数据
$(function () {
$("#produ").keyup(function (evt) {
var k = window.event ? evt.keyCode : evt.which;
if ($("#produ").val() != "" && k != 38 && k != 40 && k != 13) {
var name = $("#produ").val();
callBizAPI("AutoComplish", {//调用ajax
name: name
}, function (result) {//得到数据
var names = new Array();
if (result.length != 0) {
var layer = "";//定义一个层(这个层是一个表格)
layer = "<table id='aa'>";
$.each(result, function (idx, item) {
layer += "<tr class='line'><td class='std'>" + item.ProductName + "</td></tr>";//向表格中添加数据
});
layer += "</table>";
$("#searchresult").empty();//先清空上次的结果
$("#searchresult").append(layer);//添加这个层
$(".line:first").addClass("hover");
$("#searchresult").css("display", "");
$(".line").hover(function () {
$(".line").removeClass("hover");
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
$(".line").click(function () {//选中行后的处理
$("#produ").val($(this).text());
$("#searchresult").css("display", "none");
});
} else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
})
} else if (k == 38) {//上箭头
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#produ').val($('#aa tr.hover').text());
} else if (k == 40) {//下箭头
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#produ').val($('#aa tr.hover').text());
}
else if (k == 13) {//回车
$('#produ').val($('#aa tr.hover').text());
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
});
$("#searchresult").bind("mouseleave", function () {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
});
})
要用的css
.line
{
font-size: 12px;
background: #E0E0E0;
width: 130px;
padding: 2px;
}
.hover
{
background: #007ab8;
width: 130px;
color: #fff;
}
.std
{
width: 150px;
}
.cc{
position:relative;
}