本文實例講述了jquery+ajax+text文本框實現(xiàn)智能提示的方法。分享給大家供大家參考，具體如下：
模仿百度查詢的智能提示
先看看效果圖：
代碼部分:
CSS代碼:
<style type="text/css">
#searchresult
{
width: 130px;
position: absolute;
z-index: 1;
overflow: hidden;
left: 130px;
top: 71px;
background: #E0E0E0;
border-top: none;
}
.line
{
font-size: 12px;
background: #E0E0E0;
width: 130px;
padding: 2px;
}
.hover
{
background: #007ab8;
width: 130px;
color: #fff;
}
.std
{
width: 150px;
}
</style>
html代碼(本文采用的asp.net頁面編寫的):
<body>
<form id="form1" runat="server">
<div>
智能模糊查詢提示
<input id="txt_search" type="text" style="width: 150px;" />
<div id="searchresult" style="display: none;">
</div>
</div>
</form>
</body>
jquery代碼部分：
<script type="text/javascript">
$(function () {
$("#txt_search").keyup(function (evt) {
ChangeCoords(); //控制查詢結果div坐標
var k = window.event ? evt.keyCode : evt.which;
//輸入框的id為txt_search，這里監(jiān)聽輸入框的keyup事件
//不為空 && 不為上箭頭或下箭頭或回車
if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
$.ajax({
type: 'Post',
//async: false, //同步執(zhí)行，不然會有問題
dataType: "json",
url: "IntelligenceSelect.aspx/GetUserNameList", //提交的頁面/方法名
data: "{'userName':'" + $("#txt_search").val() + "'}", //參數（如果沒有參數：null）
contentType: "application/json; charset=utf-8",
error: function (msg) {//請求失敗處理函數
alert("數據加載失敗");
},
success: function (data) { //請求成功后處理函數。
var objData = eval("(" + data.d + ")");
if (objData.length > 0) {
var layer = "";
layer = "<table id='aa'>";
$.each(objData, function (idx, item) {
layer += "<tr class='line'><td class='std'>" + item.userName + "</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 () {
$("#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>
/// <param name="dt"></param>
/// <returns></returns>
public static string ToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
return jsonBuilder.ToString();
}
#endregion
希望本文所述對大家jQuery程序設計有所幫助。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試
