原文链接：

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();//阻止事件冒泡

});