Java星期的词库输入联想功能_类百度，输入联想功能实现

1.定义一个文本框：

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 = "

$.each(result, function (idx, item) {

layer += "

" + item.ProductName + "";//向表格中添加数据

});

layer += "

";

$("#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;

}