仿百度搜索时的下拉列表（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');

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

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

    }

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

$("#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代码：

<div class="mb20 pr f14 ff" id="tagDiv">
    <p><span>新标签</span>     
<input id="newTag" type="text" style = "border: 1px solid #555;height: 20px;"autocomplete ="off" />
 </div>

 js代码：

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代码：

$("#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代码：

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

 

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

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

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();
        });
        $("#resultDiv li").click(function (event) {
            $("#newTag").val($(this).text());
            $("form").submit();
        });
        //键盘上下键控制
        var index = -1;    //标记上下键时所处位置

        document.documentElement.onkeydown = function (e) {
            e = window.event || e;
            if (e.keyCode == 40) {  //下键操作
                if (++index == $("#resultDiv li").length) {  //判断加一操作后index值是否超出列表数目界限
                    index = -1;             //超出的话就将index值变为初始值
                    $("#newTag").val(currentTxt);    //并将文本框中值设为用户用于搜索的值
                    $("#resultDiv li").removeClass("esultDivLiHover");
                }
                else {
                    $("#newTag").val($($("#resultDiv li")[index]).text());
                    $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                }
            }
            if (e.keyCode == 38) {  //上键操作
                if (--index == -1) {    //判断自减一后是否已移到文本框
                    $("#newTag").val(currentTxt);
                    $("#resultDiv li").removeClass("esultDivLiHover");
                }
                else if (index == -2) {     //判断index值是否超出列表数目界限
                    index = $("#resultDiv li").length - 1;
                    $("#newTag").val($($("#resultDiv li")[index]).text());
                    $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                }
                else {
                    $("#newTag").val($($("#resultDiv li")[index]).text());
                    $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                }
            }
        };
    }

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