首页 > 推荐阅读 >基于jQuery的autocomplete(自动补全)类
资讯内容

相关词条:autocomplete类、数据采集、jQuery

基于jQuery的autocomplete(自动补全)类

最近很多人在群里求autocomplete类,那我就献下丑,把自己写的分享一下:

 
  1. /*! JQuery autocomplete 
  2.  * Author: Vilien 
  3.  * Date: 2013-7-12 
  4.  * 
  5.  * !@options {uri:"uri", eachRequest:false, width:0} 
  6.  * > 该运行库参数采用jQuery风格,参数说明如下 
  7.  * 
  8.  * @param uri 
  9.  * > 返回json数据的资源地址,必须,可包含一个自动适配变量:key 
  10.  * > 取值示例:{uri: "http://abc.com/auto.jsp?words=:key"} 
  11.  * > :key将由JS根据输入框输入字符自动解析 
  12.  * > uri资源返回的json数据格式必须为 ["字符串1","字符串2","字符串3"...] 
  13.  * 
  14.  * @param eachRequest 
  15.  * > 逐个字符请求资源开关,可省略,缺省为false 
  16.  * > 当打开该开关时,用户每输入一个字符,都将向服务器请求一次结果 
  17.  * > 关闭该开关(将该值设为false)时,只在输入第一个字符时向服务器请求一次,后续输入将自动过滤 
  18.  * 
  19.  * @param width 
  20.  * > 自动完成显示宽度,可省略,缺省为0 (为零则自动获取) 
  21.  * > 缺省状态下,程序会自动获取宽度,但也可以用该选项设定一个固定宽度 
  22.  */  
  23.   
  24. ;(function($){$.fn.extend({  
  25.   
  26. autocomplete: function(options){  
  27.   
  28.     var defaults = {            ///  缺省配置参数   
  29.         uri         : ":key",   ///< 可返回json数据格式的uri,:key将由JS自动解析(例:http://xx/?s=:key)   
  30.         eachRequest : false,    ///< 逐个字符请求开关(缺省关闭,即只在输入第一个字符时向服务器请求一次)   
  31.         width       : 0         ///< 显示宽度(为零则自动获取)   
  32.     };  
  33.   
  34.     /* -============ 自动完成样式 ==========- 
  35.      * 可根据需要修改 
  36.      */  
  37.     var style1 = {  
  38.         "border": "1px solid #bbb",  
  39.         "background-color": "#fff",  
  40.         "line-height": "1.2",  
  41.         "cursor": "default"  
  42.     };  
  43.   
  44.     /* -============ 自动完成鼠标经过样式 ==========- 
  45.      * 可根据需要修改 
  46.      */  
  47.     var style2 = {  
  48.         "background-color": "#ebebeb"  
  49.     };  
  50.   
  51.     // 样式处理   
  52.     if ($("style[id=autocompletecss]").length<1) {  
  53.         var styleText = ".AUTOCOMPLETE{"; // 用于封装style   
  54.         for (var i in style1) { styleText += i + ":" + style1[i] + ";"; }  
  55.         styleText    += "}.AUTOCOMPLETE p.cur{";  
  56.         for (var i in style2) { styleText += i + ":" + style2[i] + ";"; }  
  57.         styleText    += "}";  
  58.         $("head").append("<style id=\"autocompletecss\" type=\"text/css\">"+styleText+"</style>");  
  59.     }  
  60.   
  61.     $(this).each(function(){  
  62.         if (!$(this).is(":text")) {return true;}// 检测选中元素是否是单行输入框,不是则退出   
  63.   
  64.         // 初始化   
  65.         var settings = $.extend({}, defaults, options); // 合并参数   
  66.         var _self = $(this);  
  67.         _self.prop("autocomplete", "off"); // 关闭系统自动完成   
  68.   
  69.         var list,  
  70.             width= settings.width ? settings.width : _self.innerWidth(),  
  71.             wrap = $("<div class=\"AUTOCOMPLETE\"></div>").css({  
  72.                 "position" : "absolute",  
  73.                 "z-index" : 9999,  
  74.                 "width" : width,  
  75.                 "display" : "none",  
  76.                 "overflow" : "hidden",  
  77.                 "text-align" : "left"  
  78.             });  
  79.   
  80.         _self.after(wrap);  
  81.   
  82.         // 显示自动完成   
  83.         function complete(list, val) {  
  84.             wrap.children().remove();  
  85.             if (!settings.eachRequest) {  
  86.                 for (var i in list) {  
  87.                     if (list[i].substring(0, val.length) == val) {  
  88.                         wrap.append("<p style=\"margin:0;padding:0 5px\">"+list[i]+"</p>");  
  89.                     }  
  90.                 }  
  91.             } else {  
  92.                 for (var i in list) {  
  93.                     wrap.append("<p style=\"margin:0;padding:0 5px\">"+list[i]+"</p>");  
  94.                 }  
  95.             }  
  96.             var pos = _self.position();  
  97.             wrap.css({  
  98.                 "top" : pos.top + _self.outerHeight(),  
  99.                 "left" : pos.left  
  100.             });  
  101.             wrap.find("p").length>0 ? wrap.show() : wrap.hide();  
  102.         }  
  103.   
  104.         // 上下键效果   
  105.         function walkList(code) {  
  106.             var pList = wrap.children("p");  
  107.             if (!wrap.is(":visible") && pList.length < 1) {  
  108.                 return false;  
  109.             }  
  110.             var idx = wrap.children("p.cur").index();  
  111.             code === 40 ? idx++ : 0;  
  112.             code === 38 ? idx-- : 0;  
  113.             idx >= pList.length ? idx = 0 : 0;  
  114.             idx < 0 ? idx = pList.length-1 : 0;  
  115.             pList.eq(idx).mouseover();  
  116.             return true;  
  117.         }  
  118.         _self.on("keydown",function(e){  
  119.             var code = e.keyCode;  
  120.             if (code===40 || code===38) {  
  121.                 walkList(code);  
  122.             } else if (code===13) {  
  123.                 wrap.children("p.cur").click();  
  124.             }  
  125.             return true;  
  126.         });  
  127.   
  128.         _self.on("keyup",function(e){  
  129.             var code = e.keyCode,  
  130.                 val = $(this).val();  
  131.   
  132.             if (code===40 || code===38 || code===13) {  
  133.                 return true;  
  134.             }  
  135.             if (val.length === 0) {  
  136.                 wrap.hide();  
  137.                 return true;  
  138.             }  
  139.             if (val.length > 1 && !settings.eachRequest && list) { // 无需请求   
  140.                 complete(list, val);  
  141.             } else {  
  142.                 $.getJSON(settings.uri.replace(":key", val), function(result){  
  143.                     list = result;  
  144.                     complete(list, val);  
  145.                 })  
  146.             }  
  147.         });  
  148.   
  149.         $("body").on("click",function(e){  
  150.             wrap.hide();  
  151.         });  
  152.   
  153.         wrap.on("click", "p", function(){  
  154.             _self.val($(this).text());  
  155.         });  
  156.   
  157.         wrap.on("mouseover", "p", function(){  
  158.             $(this).addClass("cur").siblings().removeClass("cur");  
  159.         });  
  160.   
  161.         wrap.on("mouseout", function(){  
  162.             $(this).children("p").removeClass("cur");  
  163.         });  
  164.   
  165.     });  
  166. }  
  167.   
  168. })})(jQuery);  
  169.  
  1. 使用方法:

     
    1. <input id="auto" type="text" />  
    2. <script type="text/javascript">  
    3. $("#auto").autocomplete({uri:"http://www.mysite.com/autocomplete.php?word=:key"});  
    4. </script>  
    5.  

 





有讯软件致力于为客户定制专业的数据采集软件及服务,主要包括:网页采集,网页信息采集,网页数据采集,网络数据采集,信息采集软件,数据采集软件,网页采集器,软件定制,爬虫采集,专业数据采集。