本文實例講述了jquery+ajax+text文本框實現智能提示的方法。分享給大家供大家參考，具體如下：
模仿百度查詢的智能提示
先看看效果圖：
代碼部分:
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，這里監聽輸入框的keyup事件 //不為空 && 不為上箭頭或下箭頭或回車 if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) { $.ajax({ type: 'Post', //async: false, //同步執行，不然會有問題 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相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
