欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例

 更新時(shí)間：2016年07月09日 11:50:12   作者：wdfscp  
這篇文章主要介紹了jquery+ajax+text文本框?qū)崿F(xiàn)智能提示的方法,涉及jQuery基于ajax交互實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的動(dòng)態(tài)查詢與文本提示信息的顯示功能,需要的朋友可以參考下

本文實(shí)例講述了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頁(yè)面編寫的):

<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(); //控制查詢結(jié)果div坐標(biāo)
    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í)行，不然會(huì)有問(wèn)題
      dataType: "json",
      url: "IntelligenceSelect.aspx/GetUserNameList", //提交的頁(yè)面/方法名
      data: "{'userName':'" + $("#txt_search").val() + "'}",    //參數(shù)（如果沒(méi)有參數(shù)：null）
      contentType: "application/json; charset=utf-8",
      error: function (msg) {//請(qǐng)求失敗處理函數(shù)
       alert("數(shù)據(jù)加載失敗");
      },
      success: function (data) { //請(qǐng)求成功后處理函數(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>";
        //將結(jié)果添加到div中
        $("#searchresult").empty();
        $("#searchresult").append(layer);
        $(".line:first").addClass("hover");
        $("#searchresult").css("display", "");
        //鼠標(biāo)移動(dòng)事件
        $(".line").hover(function () {
         $(".line").removeClass("hover");
         $(this).addClass("hover");
        }, function () {
         $(this).removeClass("hover");
         //$("#searchresult").css("display", "none");
        });
        //鼠標(biāo)點(diǎn)擊事件
        $(".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");
   });
  });
  //設(shè)置查詢結(jié)果div坐標(biāo)
  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后臺(tái)代碼:

#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

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jQuery qrcode生成二維碼的方法

    jQuery qrcode生成二維碼的方法

    現(xiàn)在二維碼越來(lái)越流行，很多網(wǎng)頁(yè)都會(huì)有個(gè)二維碼，掃描后可通過(guò)手機(jī)瀏覽。jquery-qrcode是一個(gè)能夠在瀏覽器端生成二維碼的jquery插件，下面通過(guò)本文給大家介紹jQuery qrcode生成二維碼的方法，需要的朋友參考下
    2016-04-04
  • jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解

    jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • jQuery實(shí)現(xiàn)查找最近父節(jié)點(diǎn)的方法

    jQuery實(shí)現(xiàn)查找最近父節(jié)點(diǎn)的方法

    這篇文章主要介紹了jQuery實(shí)現(xiàn)查找最近父節(jié)點(diǎn)的方法,涉及jQuery針對(duì)元素節(jié)點(diǎn)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • jquery判斷密碼強(qiáng)度的驗(yàn)證代碼

    jquery判斷密碼強(qiáng)度的驗(yàn)證代碼

    本文主要介紹了jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，這是一個(gè)非常常見(jiàn)的功能，在輸入密碼的時(shí)候提示密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。
    2015-11-11
  • jQuery實(shí)現(xiàn)動(dòng)畫、消失、顯現(xiàn)、漸出、漸入效果示例

    jQuery實(shí)現(xiàn)動(dòng)畫、消失、顯現(xiàn)、漸出、漸入效果示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實(shí)例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡(jiǎn)單使用技巧,需要的朋友可以參考下
    2018-09-09
  • jquery+css實(shí)現(xiàn)下拉列表功能

    jquery+css實(shí)現(xiàn)下拉列表功能

    本文通過(guò)實(shí)例代碼給大家介紹了jquery 與css相結(jié)合實(shí)現(xiàn)的下拉列表功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2017-09-09
  • jQuery支持添加事件的日歷特效代碼分享（3種樣式）

    jQuery支持添加事件的日歷特效代碼分享（3種樣式）

    這篇文章主要介紹了jQuery支持添加事件的日歷特效，推薦給大家，有需要的小伙伴可以參考下。
    2015-08-08
  • jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕

    jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕

    這篇文章主要介紹通過(guò)jquery實(shí)現(xiàn)左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕的效果,需要的朋友可以參考下
    2014-06-06
  • 使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法

    使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • jQuery+PHP實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示特效

    jQuery+PHP實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示特效

    我們?cè)谝恍?yīng)用中需要?jiǎng)討B(tài)展示數(shù)據(jù)，比如當(dāng)前在線人數(shù)，當(dāng)前交易總額，當(dāng)前匯率等等，前端頁(yè)面需要實(shí)時(shí)刷新獲取最新數(shù)據(jù)。本文將結(jié)合實(shí)例給大家介紹使用jQuery和PHP來(lái)實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果。
    2015-03-03

最新評(píng)論