[关闭]
@52fhy 2015-07-27T10:45:49.000000Z 字数 9959 阅读 589

bigautocomplete实现联想输入，自动补全

JavaScript JS插件

bigautocomplete是一款Jquery插件。用它实现仿搜索引擎文本框自动补全插件功能很实用，使用也很简单，引入了插件之后写几行代码就可以实现，可以灵活设置。

先看效果图：

效果图

上图是通过ajax请求服务器返回的数据。下面简单介绍如何使用。

一、如何使用

引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的页面中。

二、参数说明

  1. $("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})
参数 说明
data(可选)： data：格式{data:[{title:null,result:{}},{title:null,result:{}}]} url和data两个参数必须有一个，且只有一个生效，data优先。
url(可选)： url为字符串，用来ajax后台获取数据，返回的数据格式为data参数一样。
width(可选)： 下拉框的宽度，默认使用输入框宽度。
callback(可选)： 选中行后按回车或单击时回调的函数，用于返回选中行的其他数据及做一些操作。

三、示例

1、本地数据：
html代码：

  1. <input type="text" id="tt" value="" class="text" />

javascript代码：

  1. $(function(){
  3.     $("#tt").bigAutocomplete({
  4.         width:543,
  5.         data:[{title:"中国好声音",result:{ff:"qq"}},
  6.         {title:"中国移动网上营业厅"},
  7.         {title:"中国银行"},
  8.         {title:"中国移动"},
  9.         {title:"中国好声音第三期"},
  10.         {title:"中国好声音 第一期"},
  11.         {title:"中国电信网上营业厅"},
  12.         {title:"中国工商银行"},
  13.         {title:"中国好声音第二期"},
  14.         {title:"中国地图"}],
  15.         callback:function(data){
  16.             alert(data.title);    
  17.         }
  18.     });
  20. })

js中data里的result可以不写。

2、ajax请求：

html代码：

  1. <input type="text" id="company" value="" class="text" />

javascript代码：

  1. $(function(){
  2.     $("#tt").bigAutocomplete({
  3.         width:543,
  4.         url:'http://localhost/test/suggestCom',
  5.         callback:function(data){
  6.             //alert(data.title);    
  7.         }
  8.     });
  9. })

服务端返回数据格式：

  1. {"data":[{"title":"\u5317\u4eac\u73b0\u4ee3"},{"title":"\u5317\u4eac\u57ce\u5efa\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u5efa\u5de5\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u9996\u90fd\u65c5\u6e38\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u533b\u836f\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u4e00\u8f7b\u63a7\u80a1\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u91d1\u9685\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u71d5\u4eac\u5564\u9152\u96c6\u56e2\u516c\u53f8"},{"title":"\u5317\u4eac\u5e02\u71c3\u6c14\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u4f4f\u603b\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"}]}

服务端的代码：（以ThinkPHP示例）

  1. public function suggestCom(){
  2.         $wd = $_POST['keyword'];
  3.         $keywords = $wd;
  5.         $company_model = M('Company');
  7.         $res = $company_model->where("name like '%".$keywords."%' or abbr like '%".$keywords."%' ")->limit(10)->select();
  8.         foreach($res as $v){
  9.             $suggestions[]= array('title' => $v['name']);
  10.         }
  12.         echo json_encode(array('data' => $suggestions));
  13.     }

默认是POST过来的数据，名称是keyword，返回数据是和本地data一致的。

附上jquery.bigautocomplete.js和jquery.bigautocomplete.css文件代码：

jquery.bigautocomplete.js

  1. (function($){
  2.     var bigAutocomplete = new function(){
  3.         this.currentInputText = null;//目前获得光标的输入框（解决一个页面多个输入框绑定自动补全功能）
  4.         this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//键盘上功能键键值数组
  5.         this.holdText = null;//输入框中原始输入的内容
  7.         //初始化插入自动补全div，并在document注册mousedown，点击非div区域隐藏div
  8.         this.init = function(){
  9.             $("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
  10.             $(document).bind('mousedown',function(event){
  11.                 var $target = $(event.target);
  12.                 if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
  13.                     bigAutocomplete.hideAutocomplete();
  14.                 }
  15.             })
  17.             //鼠标悬停时选中当前行
  18.             $("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
  19.                 $("#bigAutocompleteContent tr").removeClass("ct");
  20.                 $(this).addClass("ct");
  21.             }).delegate("tr", "mouseout", function() {
  22.                 $("#bigAutocompleteContent tr").removeClass("ct");
  23.             });        
  26.             //单击选中行后，选中行内容设置到输入框中，并执行callback函数
  27.             $("#bigAutocompleteContent").delegate("tr", "click", function() {
  28.                 bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
  29.                 var callback_ = bigAutocomplete.currentInputText.data("config").callback;
  30.                 if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
  31.                     callback_($(this).data("jsonData"));
  33.                 }                
  34.                 bigAutocomplete.hideAutocomplete();
  35.             })            
  37.         }
  39.         this.autocomplete = function(param){
  41.             if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
  42.                 bigAutocomplete.init();//初始化信息
  43.             }            
  45.             var $this = $(this);//为绑定自动补全功能的输入框jquery对象
  47.             var $bigAutocompleteContent = $("#bigAutocompleteContent");
  49.             this.config = {
  50.                            //width:下拉框的宽度，默认使用输入框宽度
  51.                            width:$this.outerWidth() - 2,
  52.                            //url：格式url:""用来ajax后台获取数据，返回的数据格式为data参数一样
  53.                            url:null,
  54.                            /*data：格式{data:[{title:null,result:{}},{title:null,result:{}}]}
  55.                            url和data参数只有一个生效，data优先*/
  56.                            data:null,
  57.                            //callback：选中行后按回车或单击时回调的函数
  58.                            callback:null};
  59.             $.extend(this.config,param);
  61.             $this.data("config",this.config);
  63.             //输入框keydown事件
  64.             $this.keydown(function(event) {
  65.                 switch (event.keyCode) {
  66.                 case 40://向下键
  68.                     if($bigAutocompleteContent.css("display") == "none")return;
  70.                     var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
  71.                     if($nextSiblingTr.length <= 0){//没有选中行时，选中第一行
  72.                         $nextSiblingTr = $bigAutocompleteContent.find("tr:first");
  73.                     }else{
  74.                         $nextSiblingTr = $nextSiblingTr.next();
  75.                     }
  76.                     $bigAutocompleteContent.find("tr").removeClass("ct");
  78.                     if($nextSiblingTr.length > 0){//有下一行时（不是最后一行）
  79.                         $nextSiblingTr.addClass("ct");//选中的行加背景
  80.                         $this.val($nextSiblingTr.find("div:last").html());//选中行内容设置到输入框中
  82.                         //div滚动到选中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug，数值有问题
  83.                         $bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
  85.                     }else{
  86.                         $this.val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
  87.                     }
  90.                     break;
  91.                 case 38://向上键
  92.                     if($bigAutocompleteContent.css("display") == "none")return;
  94.                     var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
  95.                     if($previousSiblingTr.length <= 0){//没有选中行时，选中最后一行行
  96.                         $previousSiblingTr = $bigAutocompleteContent.find("tr:last");
  97.                     }else{
  98.                         $previousSiblingTr = $previousSiblingTr.prev();
  99.                     }
  100.                     $bigAutocompleteContent.find("tr").removeClass("ct");
  102.                     if($previousSiblingTr.length > 0){//有上一行时（不是第一行）
  103.                         $previousSiblingTr.addClass("ct");//选中的行加背景
  104.                         $this.val($previousSiblingTr.find("div:last").html());//选中行内容设置到输入框中
  106.                         //div滚动到选中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug，数值有问题
  107.                         $bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
  108.                     }else{
  109.                         $this.val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
  110.                     }
  112.                     break;
  113.                 case 27://ESC键隐藏下拉框
  115.                     bigAutocomplete.hideAutocomplete();
  116.                     break;
  117.                 }
  118.             });        
  120.             //输入框keyup事件
  121.             $this.keyup(function(event) {
  122.                 var k = event.keyCode;
  123.                 var ctrl = event.ctrlKey;
  124.                 var isFunctionalKey = false;//按下的键是否是功能键
  125.                 for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
  126.                     if(k == bigAutocomplete.functionalKeyArray[i]){
  127.                         isFunctionalKey = true;
  128.                         break;
  129.                     }
  130.                 }
  131.                 //k键值不是功能键或是ctrl+c、ctrl+x时才触发自动补全功能
  132.                 if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
  133.                     var config = $this.data("config");
  135.                     var offset = $this.offset();
  136.                     $bigAutocompleteContent.width(config.width);
  137.                     var h = $this.outerHeight() - 1;
  138.                     $bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});
  140.                     var data = config.data;
  141.                     var url = config.url;
  142.                     var keyword_ = $.trim($this.val());
  143.                     if(keyword_ == null || keyword_ == ""){
  144.                         bigAutocomplete.hideAutocomplete();
  145.                         return;
  146.                     }                    
  147.                     if(data != null && $.isArray(data) ){
  148.                         var data_ = new Array();
  149.                         for(var i=0;i<data.length;i++){
  150.                             if(data[i].title.indexOf(keyword_) > -1){
  151.                                 data_.push(data[i]);
  152.                             }
  153.                         }
  155.                         makeContAndShow(data_);
  156.                     }else if(url != null && url != ""){//ajax请求数据
  157.                         $.post(url,{keyword:keyword_},function(result){
  158.                             makeContAndShow(result.data)
  159.                         },"json")
  160.                     }
  163.                     bigAutocomplete.holdText = $this.val();
  164.                 }
  165.                 //回车键
  166.                 if(k == 13){
  167.                     var callback_ = $this.data("config").callback;
  168.                     if($bigAutocompleteContent.css("display") != "none"){
  169.                         if(callback_ && $.isFunction(callback_)){
  170.                             callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
  171.                         }
  172.                         $bigAutocompleteContent.hide();                        
  173.                     }
  174.                 }
  176.             });    
  179.             //组装下拉框html内容并显示
  180.             function makeContAndShow(data_){
  181.                 if(data_ == null || data_.length <=0 ){
  182.                     return;
  183.                 }
  185.                 var cont = "<table><tbody>";
  186.                 for(var i=0;i<data_.length;i++){
  187.                     cont += "<tr><td><div>" + data_[i].title + "</div></td></tr>"
  188.                 }
  189.                 cont += "</tbody></table>";
  190.                 $bigAutocompleteContent.html(cont);
  191.                 $bigAutocompleteContent.show();
  193.                 //每行tr绑定数据，返回给回调函数
  194.                 $bigAutocompleteContent.find("tr").each(function(index){
  195.                     $(this).data("jsonData",data_[index]);
  196.                 })
  197.             }            
  200.             //输入框focus事件
  201.             $this.focus(function(){
  202.                 bigAutocomplete.currentInputText = $this;
  203.             });
  205.         }
  206.         //隐藏下拉框
  207.         this.hideAutocomplete = function(){
  208.             var $bigAutocompleteContent = $("#bigAutocompleteContent");
  209.             if($bigAutocompleteContent.css("display") != "none"){
  210.                 $bigAutocompleteContent.find("tr").removeClass("ct");
  211.                 $bigAutocompleteContent.hide();
  212.             }            
  213.         }
  215.     };
  218.     $.fn.bigAutocomplete = bigAutocomplete.autocomplete;
  220. })(jQuery)

jquery.bigautocomplete.css

  1. @charset "utf-8";
  2. .bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:9999 !important;max-height:220px;overflow-x:hidden;overflow-y:auto; text-align:left;}
  3. .bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
  4. .bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
  5. .bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
  6. .bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}

css经过改写，以适应某些情况不兼容的bug。

页面html代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Jquery实现仿搜索引擎文本框自动补全插件</title>
  8. <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
  9. <script src="js/bigautocomplete/jquery.bigautocomplete.js?v=2"></script>
  10. <link rel="stylesheet" href="css/bigautocomplete/jquery.bigautocomplete.css" type="text/css" />
  11. <script type="text/javascript">
  12. $(function(){
  13.     $("#tt").bigAutocomplete({
  14.         width:543,
  15.         url:'__MODULE__/test/suggestCom',
  16.         callback:function(data){
  17.             //alert(data.title);    
  18.         }
  19.     });
  21. })
  22. </script>
  24. </head>
  25. <body>
  27. <style type="text/css">
  28. *{margin:0;padding:0;list-style-type:none;}
  29. a,img{border:0;}
  30. .demo{width:720px;margin:30px auto;}
  31. .demo h2{font-size:16px;color:#3366cc;height:30px;}
  32. .demo li{float:left;}
  33. .text{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
  34. .button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
  35. </style>
  37. <div class="demo">
  38.     <h2>bigautocomplete联想输入测试</h2>
  39.     <form action="" method="post" name="searchform" id="searchform" class="searchinfo">
  40.         <ul>
  41.             <li><input type="text" id="tt" value="" class="text" /></li>
  42.             <li><input type="submit" value="搜索" class="button" /></li>
  43.         </ul>
  44.     </form>
  45. </div>
  47. </body>
  48. </html>

转自：
bigautocomplete实现联想输入，自动补全 - 飞鸿影~ - 博客园
http://www.cnblogs.com/52fhy/p/4455988.html

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注