jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實例
本文實例講述了jquery+ajax+text文本框?qū)崿F(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() + "'}", //參數(shù)(如果沒有參數(shù):null) contentType: "application/json; charset=utf-8", error: function (msg) {//請求失敗處理函數(shù) alert("數(shù)據(jù)加載失敗"); }, success: function (data) { //請求成功后處理函數(shù)。 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轉(zhuǎn)換成Json格式 /// <summary> /// dataTable轉(zhuǎn)換成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相關內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
- jQuery提示插件qTip2用法分析(支持ajax及多種樣式)
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁)
- jquery創(chuàng)建一個ajax關鍵詞數(shù)據(jù)搜索實現(xiàn)思路
- jquery實現(xiàn)ajax提交form表單的方法總結
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery ajax 向后臺傳遞數(shù)組參數(shù)示例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- 用jQuery中的ajax分頁實現(xiàn)代碼
- jQuery ajax仿Google自動提示SearchSuggess功能示例
相關文章
jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
這篇文章主要為大家詳細介紹了jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06jQuery實現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果示例
這篇文章主要介紹了jQuery實現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果,結合實例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡單使用技巧,需要的朋友可以參考下2018-09-09使用jQuery加載html頁面到指定的div實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery+PHP實現(xiàn)動態(tài)數(shù)字展示特效
我們在一些應用中需要動態(tài)展示數(shù)據(jù),比如當前在線人數(shù),當前交易總額,當前匯率等等,前端頁面需要實時刷新獲取最新數(shù)據(jù)。本文將結合實例給大家介紹使用jQuery和PHP來實現(xiàn)動態(tài)數(shù)字展示效果。2015-03-03