仿百度搜索时的下拉列表（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 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需要改进，另外这个方法还是有可以优化的地方吧。晒一晒效果图：





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