jQuery实现仿百度搜索时的下拉列表

先说一下我的实现思路吧，当用户在文本框中输入时，可以利用ajax方式将文本框内内容传给后台的某个页面，在那个页面中经过处理后将产生的结果(这里的结果是一个字符串数组)再获取过来在前台呈现。有了思路后就开始考虑怎么去具体实现吧。首先要使用ajax的话，就想到可以使用jQuery提供的$.post()方法，这个方法可带4个参数，分别是：

·url，请求的页面URL地址;

·data(可选)，作为HTTP消息的实体内容发送给服务器;

·callback(可选)，载入成功后的回调函数，自动将请求结果和状态传递给该方法;

·type(可选)，服务器端返回的数据格式，可以是：xml、html、script、json等。

好，现在对$.post()方法有了一定的了解，现在就可以考虑这个方法该怎么来写了。在我的项目中，请求的URL地址是@Url.Action("GetTags")(由于是ASP.NET MVC架构，地址是由Routing配置产生的，这个转义到前台就是一个普通的URL地址)，需要传送的是ID为newTag的文本框中的值，所以第二个参数为{pinyins: $("#newTag").val()}，这里的pinyins是由后台定义的。第三个参数callback是处理请求成功后要做的事，暂且命名为pinyinCallback，第四个参数设为'json'，即数据格式为一个JSON对象。这样的话，这个ajax请求可以写为：

 
 
 
 
    
  
  
  
  
  1. $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback,  'json'); 
    2.

但是如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，于是考虑可以将每次请求延迟一秒发送，于是发送请求的方法可以这样定义：

 
 
 
 
    
  
  
  
  
  1. function pinyinOption() {  
    2.   
  
  
  
  2.          var t = setTimeout(function () {  
    3.   
  
  
  
  3.             $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');  
    4.   
  
  
  
  4.         }, 1000);  
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    } 
    7.

现在要考虑的就是这个方法在何时调用。既然是以用户输入结果来查询的，那么可以考虑jQuery的keyup事件，可以在文本框(id为newTag)的keyup事件触发后就调用之前定义的方法。但是又考虑到这个功能中可以通过键盘中上下键来控制列表中的选项，所以这个keyup事件可以这样来定义：

 
 
 
 
    
  
  
  
  
  1. $("#newTag").keyup(function (e) {  
    2.   
  
  
  
  2.           if (e.keyCode != 40 && e.keyCode != 38) {  
    3.   
  
  
  
  3.                 currentTxt = $("#newTag").val();  
    4.   
  
  
  
  4.                pinyinOption();  
    5.   
  
  
  
  5.            }  
    6.   
  
  
  
  6.        }).focus(function () {  
    7.   
  
  
  
  7.            this.select();  
    8.   
  
  
  
  8.      }); 
    9.

其中keyCode值38、40分别代表上键和下键。currentTxt记录的是当前文本框的内容。

当请求成功后的回调函数pinyinCallback该做什么呢?这个回调函数该做的应该有这些事，首先要把请求来的数据在前台呈现出来，这样就需要创建一些新的DOM元素来装这些内容。就不废话了，直接上代码吧：

Html代码：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.      
    新标签 @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})  
    3.   
  
  
  
  3.             @ViewBag.Info
     
    4.   
  
  
  
  4.  
  
 
 
 
 
    
  
  
  
  
  1. var $resultDiv = $('
');  
  •      var $resultUl = $('');  
  •      var $resultLi = [];  
  •      var currentTxt;  
  •    
  •      function pinyinCallback(data) {   
  •          $("#resultDiv").show();  
  •          $resultUl.html("");  
  •          for (var i = 0; data[i]; i++) {  
  •              $resultLi[i] = $("
  • ");  
  •             $resultLi[i].html(data[i]);  
  •              $resultUl.append($resultLi[i]);  
  •          }  
  •          if ($resultUl.html() == "") {  
  •              $("#resultDiv").hide();  
  •          }  
  •          $resultUl.appendTo($resultDiv);  
  •          $resultDiv.appendTo($("#tagDiv"));  
  •  } 

    • 目前这个回调函数只是将请求回来的数据添加到创建的id为resultDiv的容器内，再将这个容器添加到页面中已存在的id为tagDiv的容器中。而为了美观一点并为了实现点击一个列表项就提交的功能，这个回调函数还可以做这些工作：

    js代码：

     
 
 
 
      
  
  
  
  
    1. $("#resultDiv li").hover(function () {  
      2.   
  
  
  
    2.            $(this).addClass("esultDivLiHover");  
      3.   
  
  
  
    3.          }, function () {  
      4.   
  
  
  
    4.            $(this).removeClass("esultDivLiHover");  
      5.   
  
  
  
    5.   });  
      6.   
  
  
  
    6.  $("#resultDiv").blur(function () {  
      7.   
  
  
  
    7.           $("#resultDiv").hide();  
      8.   
  
  
  
    8.  });  
      9.   
  
  
  
    9.  $("#resultDiv li").click(function (event) {  
      10.   
  
  
  
    10.           $("#newTag").val($(this).text());  
      11.   
  
  
  
    11.           $("form").submit();  
      12.   
  
  
  
    12.  }); 
      13.

    css代码：

     
 
 
 
      
  
  
  
  
    1. #resultDiv  
      2.   
  
  
  
    2.  {  
      3.   
  
  
  
    3.      left: 47px;  
      4.   
  
  
  
    4.      border: 1px solid #000;  
      5.   
  
  
  
    5.      background: #fff;  
      6.   
  
  
  
    6.      z-index: 100;  
      7.   
  
  
  
    7.      width: 200px;  
      8.   
  
  
  
    8.        
      9.   
  
  
  
    9.  }  
      10.   
  
  
  
    10.  #resultDiv li  
      11.   
  
  
  
    11.  {  
      12.   
  
  
  
    12.      cursor: default;  
      13.   
  
  
  
    13.      padding: 2px 4px;  
      14.   
  
  
  
    14.  }  
      15.   
  
  
  
    15.  .esultDivLiHover  
      16.   
  
  
  
    16.  {  
      17.   
  
  
  
    17.      background: #cfcfcf;  
      18.   
  
  
  
    18.  } 
      19.

    在列表项被点击后就提交一次表单，并把当前文本框的内容设置为列表项的内容。

    接下来就要实现键盘上下键控制的功能了，这样，全部的回调函数代码为：

     
 
 
 
      
  
  
  
  
    1. function pinyinCallback(data) {   
      2.   
  
  
  
    2.          $("#resultDiv").show();  
      3.   
  
  
  
    3.          $resultUl.html("");  
      4.   
  
  
  
    4.          for (var i = 0; data[i]; i++) {  
      5.   
  
  
  
    5.              $resultLi[i] = $("
    6. ");    
  
  
  
    7.              $resultLi[i].html(data[i]);  
      8.   
  
  
  
    8.              $resultUl.append($resultLi[i]);  
      9.   
  
  
  
    9.          }  
      10.   
  
  
  
    10.          if ($resultUl.html() == "") {  
      11.   
  
  
  
    11.              $("#resultDiv").hide();  
      12.   
  
  
  
    12.          }  
      13.   
  
  
  
    13.          $resultUl.appendTo($resultDiv);  
      14.   
  
  
  
    14.          $resultDiv.appendTo($("#tagDiv"));  
      15.   
  
  
  
    15.          $("#resultDiv li").hover(function () {  
      16.   
  
  
  
    16.              $(this).addClass("esultDivLiHover");  
      17.   
  
  
  
    17.          }, function () {  
      18.   
  
  
  
    18.              $(this).removeClass("esultDivLiHover");  
      19.   
  
  
  
    19.          });  
      20.   
  
  
  
    20.          $("#resultDiv").blur(function () {  
      21.   
  
  
  
    21.              $("#resultDiv").hide();  
      22.   
  
  
  
    22.          });  
      23.   
  
  
  
    23.          $("#resultDiv li").click(function (event) {  
      24.   
  
  
  
    24.              $("#newTag").val($(this).text());  
      25.   
  
  
  
    25.              $("form").submit();  
      26.   
  
  
  
    26.          });  
      27.   
  
  
  
    27.          //键盘上下键控制  
      28.   
  
  
  
    28.          var index = -1;    //标记上下键时所处位置  
      29.   
  
  
  
    29.    
      30.   
  
  
  
    30.          document.documentElement.onkeydown = function (e) {  
      31.   
  
  
  
    31.              e = window.event || e;  
      32.   
  
  
  
    32.              if (e.keyCode == 40) {  //下键操作  
      33.   
  
  
  
    33.                  if (++index == $("#resultDiv li").length) {  //判断加一操作后index值是否超出列表数目界限  
      34.   
  
  
  
    34.                      index = -1;             //超出的话就将index值变为初始值  
      35.   
  
  
  
    35.                      $("#newTag").val(currentTxt);    //并将文本框中值设为用户用于搜索的值  
      36.   
  
  
  
    36.                      $("#resultDiv li").removeClass("esultDivLiHover");  
      37.   
  
  
  
    37.                  }  
      38.   
  
  
  
    38.                  else {  
      39.   
  
  
  
    39.                      $("#newTag").val($($("#resultDiv li")[index]).text());  
      40.   
  
  
  
    40.                      $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
      41.   
  
  
  
    41.                  }  
      42.   
  
  
  
    42.              }  
      43.   
  
  
  
    43.              if (e.keyCode == 38) {  //上键操作  
      44.   
  
  
  
    44.                  if (--index == -1) {    //判断自减一后是否已移到文本框  
      45.   
  
  
  
    45.                      $("#newTag").val(currentTxt);  
      46.   
  
  
  
    46.                      $("#resultDiv li").removeClass("esultDivLiHover");  
      47.   
  
  
  
    47.                  }  
      48.   
  
  
  
    48.                  else if (index == -2) {     //判断index值是否超出列表数目界限  
      49.   
  
  
  
    49.                      index = $("#resultDiv li").length - 1;  
      50.   
  
  
  
    50.                      $("#newTag").val($($("#resultDiv li")[index]).text());  
      51.   
  
  
  
    51.                      $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
      52.   
  
  
  
    52.                  }  
      53.   
  
  
  
    53.                  else {  
      54.   
  
  
  
    54.                      $("#newTag").val($($("#resultDiv li")[index]).text());  
      55.   
  
  
  
    55.                      $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
      56.   
  
  
  
    56.                  }  
      57.   
  
  
  
    57.              }  
      58.   
  
  
  
    58.          };  
      59.   
  
  
  
    59.      } 
      60.

    OK，现在这个功能就差不多搞定了，在ie6下也是完全正常，不过还是有一些bug需要改进，另外这个方法还是有可以优化的地方吧。晒一晒效果图：

    希望明天又是美好的一天，又不正的地方还希望多多指出。

    原文链接：http://www.cnblogs.com/luckyadam/archive/2011/06/29/2093477.html

    网页题目：jQuery实现仿百度搜索时的下拉列表
    网页路径：http://www.csdahua.cn/qtweb/news12/421662.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    全网营销推广知识

    分类信息网站

    自适应网站设计　　 　工业净化空调　　 　四川广汉锦华　　 　乐山电信机房　　 　IOS开发　　 　网站推广　　 　成都定制网站建设　　 　绵阳电信机房　　 　手机app　　 　手机网站制作　　 　主机托管　　 　尊格展览　　 　化妆品企业网站建设方案　　 　绵竹网站建设　　 　柴油发电机租赁　　 　成都机柜租用　　 　定制网站　　 　四川乐山服务器托管　　 　西云服务器托管　　 　交互设计