jquery+ajax+text文字框實現智能提示完整執行個體，jqueryajax

最後更新：2016-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More