做小项目时用到的根据输入提示用户 ,ajax+jquey实现
<script type="text/javascript">
$(function() {
$("#txt_search").keyup(function(evt){
ChangeLocation();
var k = window.event ? evt.keyCode : evt.which;
if ($("#txt_search").val()!= "" && k!=38&& k!= 40 && k != 13) {
$.get("addUserMobile.do",{mobile_Number:$("#txt_search").val()},function(data){
if (data.length > 0){
var str = "";
str = "<table id='aa'>";
for(var i=0;i<data.length;i++){
str += "<tr class='line'><td class='std'>"+ data[i]+ "</td></tr>";
}
str+= "</table>";
//将结果添加到div中
$("#searchresult").empty();
$("#searchresult").append(str);
$(".line:first").addClass("hover");
$("#searchresult").css("display", "");
$(".line").hover(function({$(".line").removeClass("hover");
$(this).addClass("hover");},
function() {
$(this).removeClass("hover");
});
//其他事件
$(".line").click(function() {$("#txt_search").val($(this).text());
$("#searchresult").css("display","none");
});
} else {
$("#searchresult").empty();
$("#searchresult").css(
"display", "none");
}
//}
},"json");
} else if (k == 38) {
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
} else if (k == 40) {
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
} else if (k == 13) {
$('#txt_search').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 ChangeLocation() {
var left = $("#txt_search").position().left;
var top = $("#txt_search").position().top + 20;
$("#searchresult").css("left", left + "px");
$("#searchresult").css("top", top + "px");
}
</script>
效果: