仿google搜索提示

最新推荐文章于 2024-08-30 10:14:48 发布

yiluoAK_47

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： google function autocomplete javascript dwr java

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

我是专做后台的，平时也弄一下 javascript 和 CSS ，之前在公司用 DWR 和 JS 做了一个类似 google 的搜索提示。现在把 DWR 去掉，用静态的 JSON 数据代替，为的就是脱离后台，可以静态看到效果。现在只整理了一部分，还不支持键盘事件。如果有时间我会把剩下的功能也整理出来。

如果写得不好，大家请指教。

在 IE6 FireFox Chrome 下都可以

先看下 html 代码：

    Java代码   
    
  
 <html>  
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
     <title>Auto Complete</title>  
     <script type="text/javascript" src="autoComplete.js"></script>  
     <link rel="stylesheet" type="text/css" href="autoComplete.css"></link>  
 </head>  
   
 <body>  
     <div>请输入a,b或其它字符看效果。</div>  
     <div>  
         <input name="summary" id="summary" class="text medium" οnkeyup="Auto.autoGet(this.value);" οnblur="Assist.autoClose();" autocomplete="off" /><input type="button" value="搜索">  
     </div>  
     <div>  
         <ul id="autoUl"></ul>  
     </div>  
 </body>  
 </html>  

     Java代码   
     
   
 /** 
  * @author <a href="mailto:toozwd@gmail.com">张文弟</a> 
  * 模仿google搜索的自动完成 
  * 用最精简的代码实现最强大的功能 
  */  
   
 //instead document.getElementById()  
 var $ = function (id) {  
     return "string" == typeof id ? document.getElementById(id) : id;  
 };  
   
 //instead document.getElementById().value  
 var $F = function (id) {  
     return $(id).value;  
 };  
   
 var Auto = {  
       
     autoGet : function(value) {  
         if(value == '') {  
             this.closePop();  
         } else {  
             // get the return value list from json  
             var jsonValue = getListJson(value).summary;  
             this.autoCallback(jsonValue);  
         }  
     },  
       
     autoCallback : function(list) {  
         //remove the old pop li  
         this.closePop();  
         if (list.length > 0) {  
             for(var i = 0;i < list.length; i++){  
                 $("autoUl").className = 'autoUl';  
                 var autoLi = document.createElement("li");  
                   
                 // onmouseout event  
                 autoLi.onmouseout = function() {  
                     this.className = 'mouseOut';   
                     Assist.isOnmouseover = false;  
                 }  
                   
                 // onmouseover event  
                 autoLi.onmouseover = function() {  
                     this.className = 'mouseOver';  
                     Assist.isOnmouseover = true;  
                 }  
                   
                 // onclick event  
                 autoLi.onclick = function() {  
                     Assist.autoPush(this);  
                 }  
                   
                 liValue = '<div class="resultName">' + list[i].name + '</div>';  
                 liValue += '<div class="resultTimes">' + list[i].times + '&nbsp;结果</div>';  
                 autoLi.innerHTML = liValue;  
   
                 $("autoUl").appendChild(autoLi);  
             }  
               
             //pop the li  
             var closeLi = document.createElement("li");  
             closeLi.style.textAlign = "right";  
             closeLi.innerHTML = '<a href="javascript:void(0);" οnclick="Auto.closePop();">关闭</a>';  
             $("autoUl").appendChild(closeLi);  
         }  
     },  
       
     closePop : function() {  
         var ul = $("autoUl").childNodes.length;  
         for(var i = ul - 1; i >= 0 ; i--) {  
             $("autoUl").removeChild($("autoUl").childNodes[i]);  
         }  
         $("autoUl").className = "borderNull";  
     }  
 }  
   
 var Assist = {  
   
     isOnmouseover : false,  
       
     // close the auto complete message when onclick the page of the body(input lose focus)  
     autoClose : function() {  
         if(this.isOnmouseover == false) {  
             Auto.closePop();  
         }  
     },  
       
     autoPush : function(obj) {  
         $("summary").value = obj.childNodes[0].firstChild.nodeValue;  
         Auto.closePop();  
         //document.forms[0].submit();  
     }  
   
 }  
   
 // the json test data  
 function getListJson(name) {  
     if(name == 'a') {  
         var summaryJson = {"summary": [    
             {"name": "auto", "times": "13"},    
             {"name": "ajax", "times": "15"},    
             {"name": "abacus", "times": "33"}    
             ]    
         };  
         return summaryJson;  
     } else if(name == 'b') {  
         var summaryJson = {"summary": [    
             {"name": "blue", "times": "18"},    
             {"name": "blind", "times": "24"},    
             {"name": "because", "times": "384"}    
             ]    
         };  
         return summaryJson;  
     } else {  
         var summaryJson = {"summary": [    
             {"name": "didn't input", "times": "31"},  
             {"name": "the 'a' or 'b'", "times": "39"},  
             {"name": "display the ", "times": "44"},    
             {"name": "defult value", "times": "129"}    
             ]    
         };  
         return summaryJson;  
     }  
 }  

 
  
  
 

     Java代码   
     
   
 input {  
     margin: 0;  
     padding: 0;  
 }  
   
 ul {  
     margin: 0;  
     padding: 0;  
     list-style: none;  
     background: #ffffff;  
 }  
   
 ul li {  
     line-height: 1.5em;  
     margin: 0;  
     padding: 0;  
     width: 302px;  
     background: #ffffff;  
     cursor: default;  
     font-size: 12px;  
     height: 20px;  
 }  
   
 .autoUl {  
     margin-top: -2px;  
     padding: 0;  
     width: 302px;  
     border: 1px solid #111111;  
     position: absolute;  
     background: #ffffff;  
 }  
   
 .mouseOver {  
     color: #ffffff;  
     background: #6699FF;  
 }  
   
 .mouseOut {  
     color: #111111;  
     background: #ffffff;  
 }  
   
 .borderNull {  
     border: none;  
 }  
   
 .autoNone {  
     display: none;  
 }  
   
 .medium {  
     width: 300px;  
 }  
   
 .resultName {  
     float: left;  
 }  
   
 .resultTimes {  
     color: #008000;  
     text-align: right;  
 }  

yiluoAK_47

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿google搜索提示

我是专做后台的，平时也弄一下 javascript 和 CSS ，之前在公司用 DWR 和 JS 做了一个类似 google 的搜索提示。现在把 DWR 去掉，用静态的 JSON 数据代替，为的就是脱离后台，可以静态看到效果。现在只整理了一部分，还不支持键盘事件。如果有时间我会把剩下的功能也整理出来。如果写得不好，大家请指教。在 IE6 FireFox Chrome 下都可以
复制链接

扫一扫

专栏目录