现在的位置: 首页 > 综合 > 正文

仿百度搜索时的下拉列表提示（jQuery实现）

2013年08月18日 ⁄ 综合 ⁄ 共 3451字 ⁄ 字号小中大 ⁄ 评论关闭

仿百度搜索时的下拉列表（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请求可以写为：

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

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

View

 Code
function pinyinOption() {
       var t = setTimeout(function () {
           $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');
       }, 1000);

   }

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

View

 Code
$("#newTag").keyup(function (e) {
           if (e.keyCode != 40 && e.keyCode != 38) {
               currentTxt = $("#newTag").val();
               pinyinOption();
           }
       }).focus(function () {
           this.select();
       });

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

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

Html代码：

View

 Code

1 <div class="mb20 pr f14 ff" id="tagDiv">
2     <p><span>新标签</span> @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})
3             <input type="submit" value="添加" /><span>@ViewBag.Info</span></p>
4  </div>

js代码：

View

 Code
var $resultDiv = $('<div id="resultDiv" class="pa f12 ff"></div>');
   var $resultUl = $('<ul id="resultUl"></ul>');
   var $resultLi = [];
   var currentTxt;

   function pinyinCallback(data) { 
       $("#resultDiv").show();
       $resultUl.html("");
       for (var i = 0; data[i]; i++) {
           $resultLi[i] = $("<li></li>");
           $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代码：

View

 Code
$("#resultDiv li").hover(function () {
         $(this).addClass("esultDivLiHover");
       }, function () {
         $(this).removeClass("esultDivLiHover");
});
$("#resultDiv").blur(function () {
        $("#resultDiv").hide();
});
$("#resultDiv li").click(function (event) {
        $("#newTag").val($(this).text());
        $("form").submit();
});

css代码：

View

 Code
#resultDiv
 {
   left: 47px;
   border: 1px solid #000;
   background: #fff;
   z-index: 100;
   width: 200px;
   
 }
#resultDiv li
 {
   cursor: default;
   padding: 2px 4px;
 }
.esultDivLiHover
 {
   background: #cfcfcf;
 }

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

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

View

 Code
function pinyinCallback(data) { 
       $("#resultDiv").show();
       $resultUl.html("");
       for (var i = 0; data[i]; i++) {
           $resultLi[i] = $("<li></li>");
           $resultLi[i].html(data[i]);
           $resultUl.append($resultLi[i]);
       }
       if ($resultUl.html() == "") {
           $("#resultDiv").hide();
       }
       $resultUl.appendTo($resultDiv);
       $resultDiv.appendTo($("#tagDiv"));
       $("#resultDiv li").hover(function () {
           $(this).addClass("esultDivLiHover");
       }, function () {
           $(this).removeClass("esultDivLiHover");
       });
       $("#resultDiv").blur(function () {
           $("#resultDiv").hide();
       });