仿百度下拉框--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（）

参考：从浏览器的focus 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();//阻止事件冒泡
});