仿百度下拉框--ajax
原文链接：
http://www.cnblogs.com/luckyadam/archive/2011/06/29/2093477.html
我自己的使用环境：vs2010+MVC4+easyui
流程：
1.先在form中加入一个div，例如<div id="tagDiv" tabindex="0"></div>
//tabindex="0" 使其可以使用blur（）
http://www.cnblogs.com/_franky/archive/2010/04/28/1722592.html
还有一个文本框：
@Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})
2.弄一个隐藏域的URL，这步可以不用写，直接在post里面写url也可以。
例如@Html.Hidden("getUrl", Url.Action("GetList"))
3.js：
//先定义：
var $resultDiv = $('<div id="resultDiv" class="pa f12 ff"></div>');
var $resultUl = $('<ul id="resultUl"></ul>');
var $resultLi = [];
var currentTxt;
$(function () {//页面加载完后加载
$("#newTag").keyup(function (e) {
if (e.keyCode != 40 && e.keyCode != 38) {//最好加上37、39（左右）
currentTxt = $("#newTag").val();
pinyinOption();
}
}).focus(function () {
this.select();
});
function pinyinOption() {
$.post('@Url.Action("GetTags")',{ pinyins: $("#newTag").val() }, pinyinCallback, 'json');
}
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");
});
$("#tagDiv").blur(function () {
$("#resultDiv").hide();//离开隐藏div
});
$("#resultDiv li").click(function (event) {
$("#newTag").val($(this).text());
//$("form").submit();
$("#resultDiv").hide();//点击选择之后就隐藏，上面的blur我使用了没有用，弄不懂
});
//键盘上下键控制
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");
}
}
};
}
}
4.关于controller怎么获取数据就不说了，下面讲下css。
关键点：通过"position:absolute; z-index: 100;"样式来使得div浮在上层
#resultDiv
{
left: 47px;
border: 1px solid #000;
background: #fff;
z-index: 100;
position:absolute;
width: 200px;
}
#resultDiv li
{
cursor: default;
padding: 2px 4px;
}
.esultDivLiHover
{
background: #cfcfcf;
}
隐藏div问题
1.离开div范围隐藏
$("#tagDiv").mouseleave(function () {//离开
$("#resultDiv").hide();
});
mouseenter和mouseleave，这两个函数是jquery封装的函数， 可以监控鼠标移近和移出指定的div
$("#tagDiv").live("mouseenter",function(){
//处理流程
});
$("#tagDiv").live("mouseleave",function(){
//处理流程
});
2.点击页面隐藏div
$(document).click(function () {
$("#resultDiv").hide();
});
存在问题：如果点击文本框,div也隐藏
解决：
$("#newTag").click(function (e) {
e.stopPropagation();//阻止事件冒泡
});
