文本框实时响应搜索代码

JS代码：

$(function () {
$("#areaName").keyup(function (evt) {
ChangeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为areaName，这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if ($("#areaName").val() != "" && k != 38 && k != 40 && k != 13) {
$.ajax({
type: 'Post',
//async: false, //同步执行，不然会有问题
dataType: "json",
url: "../Index/Area", //提交的页面/方法名
data: "{'areaName':'" + $("#areaName").val() + "'}", //参数（如果没有参数：null）
contentType: "application/json; charset=utf-8",
error: function (msg) {//请求失败处理函数
//alert("数据加载失败");
},
success: function (data) { //请求成功后处理函数。

var objData = data;
var layer = "";
layer = "<table id='aa'>";
$.each(objData, function (i) {
//alert(objData[i].AREANAME);
layer += "<tr class='line'><td class='std'>" + objData[i] + "</td></tr>";
});
layer += "</table>";

//将结果添加到div中
$("#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");
//$("#searchresult").css("display", "none");
});
//鼠标点击事件
$(".line").click(function () {
$("#areaName").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");
$('#areaName').val($('#aa tr.hover').text());
} else if (k == 40) {//下箭头
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#areaName').val($('#aa tr.hover').text());
}
else if (k == 13) {//回车
$('#areaName').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");
});
});
//设置查询结果div坐标

function ChangeCoords() {
// var left = $("#areaName")[0].offsetLeft; //获取距离最左端的距离，像素，整型
// var top = $("#areaName")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
var left = $("#areaName").position().left; //获取距离最左端的距离，像素，整型
var top = $("#areaName").position().top + 20;; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
$("#searchresult").css("left", left + "px"); //重新定义CSS属性
$("#searchresult").css("top", top + "px"); //同上
}

Html代码：

<div class="form-group" id="search">
<input type="text" class="form-control" id="areaName" placeholder="区名">
<div id="searchresult" style="display: none; background-color: white">
</div>

</div>

后台响应代码：

 List<string> userlist = userbll.AreaNameList(areaName);条件查询list集合即可