天涯之外

导航

基于JQUERY制作的仿GOOGLE自动完成插件

 

基于JQUERY制作的仿GOOGLE自动完成插件

数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}

效果如图

完整的JS代码如下

 

Code

 

 

CSS文件

 

 

Code

 

 

调用范例

$("#Keyword").AutoComplete("search.asp");

 程序页面生成格式为{'keylist':[{'keyname':'测试数据1','keyextend':'一共有5个结果'},{'keyname':'测试数据2','keyextend':'一共有5个结果'},{'keyname':'测试数据3','keyextend':'一共有5个结果'},{'keyname':'测试数据4','keyextend':'一共有5个结果'},{'keyname':'测试数据5','keyextend':'一共有5个结果'},{'keyname':'测试数据6','keyextend':'一共有5个结果'},{'keyname':'测试数据7','keyextend':'一共有5个结果'},{'keyname':'测试数据8','keyextend':'一共有5个结果'},{'keyname':'测试数据9','keyextend':'一共有5个结果'},{'keyname':'测试数据10'}]}

完整的例子下载

/Files/cntlis/AutoComplete.rar

本例子来自博客园，其实关于Autocompleted的例子，用jquery的话，是很多很多，但那都是国外的，难得有国内的例子，看到了就复制回来一份，呵呵

原文：http://www.cnblogs.com/cntlis/archive/2009/03/14/1412144.html

数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}  

JS代码（当成JS代码插入的时候，高亮会超时，所以，用HTML格式了一下）
  1. /**//*  
  2.  * jQuery AutoComplete  
  3.  *  
  4.  * Author: cntlis  
  5.  * http://blog.csdn.net/cntlis  
  6.  *  
  7.  * Licensed like jQuery, see http://docs.jquery.com/License  
  8.  *  
  9.  * 作者：cntlis  
  10.  * QQ：8112857  
  11.  */  
  12. $.fn.AutoComplete = function(url,option){  
  13.     var me= this;  
  14.     var strKey= $(me).val();  
  15.     var strKeyBak= "";  
  16.     var isShow = false;  
  17.     var doption={  
  18.         iwidth: '0px',    //下拉框的宽度  
  19.         iLengthLower: 1,    //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索  
  20.         iLengthUpper: 50,  
  21.         strPara: "Keyword",    //变量名称  
  22.         zIndex: 1,    //提示框的Z-INDEX值  
  23.         hasscroll: 0,    //是否出现滚动条0无1有  
  24.         hasclose: 1,    //是否拥有关闭窗口  
  25.         desfun:function(){}  
  26.     };  
  27.       
  28.     $.extend(doption,option);      
  29.     var iLengthLower= doption.iLengthLower;  
  30.     var iLengthUpper= doption.iLengthUpper;  
  31.     var strPara= doption.strPara;  
  32.     if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}  
  33.     $("#autocomplete").hide();  
  34.       
  35.     $(me).keyup(function(e){keysearch(e.keyCode);});  
  36.     $(me).keydown(function(e){LineSelect(e.keyCode);});  
  37.     $(me).bind("blur",function(){  
  38.         strKeyBak= $("#autocomplete ul .selected .keyname").text();    //为click事件增加处理  
  39.         if (strKeyBak.length>0 && strKeyBak!=$(me).val()){  
  40.             $(me).val(strKeyBak);  
  41.             doption.desfun();  
  42.         };  
  43.         floorHide();  
  44.     });  
  45.       
  46.     var encode=function(v){//如果包含中文就escape,避免重复escape)  
  47.   return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');  
  48.  }  
  49.       
  50.     function floorHide(){  
  51.         $("#autocomplete").hide().html("");  
  52.         strKey= "";  
  53.         isShow = false;  
  54.     }  
  55.       
  56.     function floorShow(){  
  57.         var p= $(me).offset();  
  58.         var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;  
  59.         $("#autocomplete").css({  
  60.          'z-index:':doption.zIndex,  
  61.          width:w,  
  62.          top:parseInt(p.top+$(me).outerHeight())+"px",  
  63.          left:parseInt(p.left)+"px"  
  64.      }).show();  
  65.         strKey= "";  
  66.         isShow = true;  
  67.     }  
  68.       
  69.     function keysearch(code){  
  70.         var strKeyNow=$(me).val();  
  71.         if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return;    //TAB/回车、ESC、向上、向下  
  72.         if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){  
  73.             $.ajax({  
  74.                 type: "Get",  
  75.                 dataType: "json",  
  76.                 url: url,  
  77.                 data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",  
  78.                 success: function(json){  
  79.                     jsonjson=json.keylist;  
  80.                     if (json.length>0){  
  81.                         //获取搜索数据  
  82.                         var strContent= "<ul>";  
  83.                         $.each(json, function(i, n){  
  84.                             if(n.keyname.length>0){    //如果  
  85.                                 //alert(n.keyname);  
  86.                                 strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';  
  87.                                 try{  
  88.                                 if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}  
  89.                                 }catch(E){};  
  90.                                 strContent+= '</li>';  
  91.                             };  
  92.                         });  
  93.                         if (doption.hasclose==1){  
  94.                             strContent+= '<li class="close"><span>关闭</span></li>';  
  95.                         }  
  96.                         strContent+='</ul>';  
  97.                         $("#autocomplete").html(strContent);  
  98.                         $("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});  
  99.                         floorShow();  
  100.                     }else{  
  101.                         //没有搜索数据  
  102.                         floorHide();  
  103.                         return;  
  104.                     }  
  105.                 }  
  106.             });  
  107.             strKey=$(me).val();  
  108.         }  
  109.         if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();  
  110.     }  
  111.       
  112.     function LineSelect(code){  
  113.         if(code == 27){floorHide();};//回车键、ESC键  
  114.         if(code == 13){floorHide();doption.desfun();};  
  115.         if(!isShow) return;  
  116.         ObjSelected=$("#autocomplete ul .selected");  
  117.         if (ObjSelected.length>0){    //如果已经有选定  
  118.             //alert('dasfdas');  
  119.             if(code == 38){    //向上键  
  120.                 if(ObjSelected.prev().text() != ""){    //如果不是第一个数据  
  121.                     ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");  
  122.                     $(me).val($("#autocomplete ul .selected .keyname").text());  
  123.                 }else{  
  124.                     ObjSelected.removeClass("selected").addClass("unselected");  
  125.                     $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");  
  126.                     $(me).val($("#autocomplete ul .selected .keyname").text());  
  127.                 }  
  128.             }else if (code == 40){    //向下键  
  129.                 if(ObjSelected.next().text() != ""){    //如果不是第一个数据  
  130.                     ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");  
  131.                     $(me).val($("#autocomplete ul .selected .keyname").text());  
  132.                 }else{  
  133.                     ObjSelected.removeClass("selected").addClass("unselected");  
  134.                     $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");  
  135.                     $(me).val($("#autocomplete ul .selected .keyname").text());  
  136.                 }  
  137.             }  
  138.         }else if(code == 38){  
  139.                 $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");  
  140.                 $(me).val($("#autocomplete .keyinfo:last .keyname").text());  
  141.         }else if(code == 40){  
  142.                 $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");  
  143.                 $(me).val($("#autocomplete .keyinfo:first .keyname").text());  
  144.         }  
  145.     }  
  146. }  

 

 

CSS代码
  1. #autocomplete{}{ border: 1px solid #000; position: absolute; }  
  2. /**//*每行的格式*/  
  3. #autocomplete li{}{ display: block; text-align: left; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; }  
  4. /**//*鼠标选中时的格式*/  
  5. #autocomplete .selected{}{ background-color: #565da9; color: #fff; overflow: hidden; }  
  6. /**//*鼠标离开时代格式*/  
  7. #autocomplete .unselected{}{ background-color: #fff; color: #666; }  
  8. /**//*关键字信息*/  
  9. #autocomplete .keyname{}{ display: block; float: left; }  
  10. /**//*关键字扩展信息*/  
  11. #autocomplete .keyextend{}{ display: block; float: right; color: green; }  
  12. #autocomplete .unselected .keyextend{}{ color: green; }  
  13. #autocomplete .selected .keyextend{}{ color: #fff; }  
  14. /**//*关闭*/  
  15. #autocomplete .close{}{ text-align: right; }  
  16. #autocomplete .close span{}{ color: blue; cursor: pointer; text-decoration: underline; }  

 

 

调用范例

$("#Keyword").AutoComplete("search.asp");

是不是很简单的？只是search.asp返回的数据要是上面所提供的格式，对于PHP来说就太方便了，只要生成相应的数组，然后json_encode一下就全出来了

 

 

 

 

 

 

--------------------------------------------------------------------------------------------------------

 

基于JQUERY制作的仿GOOGLE自动完成插件

数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}

效果如图

完整的JS代码如下

 

Code

 

 

CSS文件

 

 

Code

 

 

调用范例

$("#Keyword").AutoComplete("search.asp");

 程序页面生成格式为{'keylist':[{'keyname':'测试数据1','keyextend':'一共有5个结果'},{'keyname':'测试数据2','keyextend':'一共有5个结果'},{'keyname':'测试数据3','keyextend':'一共有5个结果'},{'keyname':'测试数据4','keyextend':'一共有5个结果'},{'keyname':'测试数据5','keyextend':'一共有5个结果'},{'keyname':'测试数据6','keyextend':'一共有5个结果'},{'keyname':'测试数据7','keyextend':'一共有5个结果'},{'keyname':'测试数据8','keyextend':'一共有5个结果'},{'keyname':'测试数据9','keyextend':'一共有5个结果'},{'keyname':'测试数据10'}]}

完整的例子下载

/Files/cntlis/AutoComplete.rar

 

posted on 2009-11-16 10:54  天涯之外  阅读(286)  评论(0)  编辑  收藏  举报