jquery+ajax+text文本框实现智能提示完整实例

2020-05-27 18:11:29易采站长站整理

//鼠标移动事件
$(".line").hover(function () {
$(".line").removeClass("hover");
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
//$("#searchresult").css("display", "none");
});
//鼠标点击事件
$(".line").click(function () {
$("#txt_search").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");
$('#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 ChangeCoords() {
// var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离,像素,整型
// var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
var left = $("#txt_search").position().left; //获取距离最左端的距离,像素,整型
var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
$("#searchresult").css("left", left + "px"); //重新定义CSS属性
$("#searchresult").css("top", top + "px"); //同上
}
</script>

.cs后台代码:


#region
[WebMethod()]public static string GetUserNameList(string userName)
{
StringBuilder returnStr = new StringBuilder();
string strsql = "select userName from pub_user_inf where userName like '" + userName + "%' and useStatus=1";
DataTable dt = pms.SqlHelper.ExecuteDataTable(strsql);
if (dt.Rows.Count > 0)
{
returnStr.Append(ToJson(dt));
return returnStr.ToString();
}
else
{
return "";
}
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>