百度提示框 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         .search
  7         {
  8             left: 0;
  9             position: relative;
 10         }
 11         #auto_div
 12         {
 13             display: none;
 14             width: 300px;
 15             border: 1px #74c0f9 solid;
 16             background: #FFF;
 17             position: absolute;
 18             top: 24px;
 19             left: 0;
 20             color: #323232;
 21         }
 22     </style>
 23     <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
 24     <script type="text/javascript">
 25 
 26         //测试用的数据
 27         var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "老爷爷", "小妹妹", "老奶奶", "大鹏", "大明", "大鹏展翅", "你好", "hello", "hi"];
 28         var old_value = "";
 29         var highlightindex = -1;   //高亮
 30 
 31         //自动完成
 32         function AutoComplete(auto, search, mylist) {
 33             if ($("#" + search).val() != old_value || old_value == "") {
 34                 var autoNode = $("#" + auto);   //缓存对象（弹出框）
 35                 var carlist = new Array();
 36                 var n = 0;
 37                 old_value = $("#" + search).val();
 38 
 39                 for (i in mylist) {
 40                     if (mylist[i].indexOf(old_value) >= 0) {
 41                         carlist[n++] = mylist[i];
 42                     }
 43                 }
 44                 if (carlist.length == 0) {
 45                     autoNode.hide();
 46                     return;
 47                 }
 48                 autoNode.empty();  //清空上次的记录
 49                 for (i in carlist) {
 50                     var wordNode = carlist[i];   //弹出框里的每一条内容
 51 
 52                     var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
 53                     newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
 54 
 55                     newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框
 56 
 57                     //鼠标移入高亮，移开不高亮
 58                     newDivNode.mouseover(function () {
 59                         if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）
 60                             autoNode.children("div").eq(highlightindex).css("background-color", "white");
 61                         }
 62                         //记录新的高亮节点索引
 63                         highlightindex = $(this).attr("id");
 64                         $(this).css("background-color", "#ebebeb");
 65                     });
 66                     newDivNode.mouseout(function () {
 67                         $(this).css("background-color", "white");
 68                     });
 69 
 70                     //鼠标点击文字上屏
 71                     newDivNode.click(function () {
 72                         //取出高亮节点的文本内容
 73                         var comText = autoNode.hide().children("div").eq(highlightindex).text();
 74                         highlightindex = -1;
 75                         //文本框中的内容变成高亮节点的内容
 76                         $("#" + search).val(comText);
 77                     })
 78                     if (carlist.length > 0) {    //如果返回值有内容就显示出来
 79                         autoNode.show();
 80                     } else {               //服务器端无内容返回 那么隐藏弹出框
 81                         autoNode.hide();
 82                         //弹出框隐藏的同时，高亮节点索引值也变成-1
 83                         highlightindex = -1;
 84                     }
 85                 }
 86             }
 87 
 88             //点击页面隐藏自动补全提示框
 89             document.onclick = function (e) {
 90                 var e = e ? e : window.event;
 91                 var tar = e.srcElement || e.target;
 92                 if (tar.id != search) {
 93                     if ($("#" + auto).is(":visible")) {
 94                         $("#" + auto).css("display", "none")
 95                     }
 96                 }
 97             }
 98 
 99         }
100 
101         $(function () {
102             old_value = $("#search_text").val();
103             $("#search_text").focus(function () {
104                 if ($("#search_text").val() == "") {
105                     AutoComplete("auto_div", "search_text", test_list);
106                 }
107             });
108 
109             $("#search_text").keyup(function () {
110                 AutoComplete("auto_div", "search_text", test_list);
111             });
112         });
113     </script>
114 </head>
115 <body>
116     <div class="search">
117         <input type="text" id="search_text" />
118         <div id="auto_div">
119         </div>
120     </div>
121 </body>
122 </html>

 

posted @ 2013-08-21 13:08  史红星-shihongxing  阅读(162)  评论(0)    收藏  举报