码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2015-04-25 16:24:11      阅读：172      评论：0      收藏：0      [点我收藏+]

标签：

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

 

先看效果图：

 

技术分享

 

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

 

一、如何使用：

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

二、参数说明：

$("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代码：
<input type="text" id="tt" value="" class="text" />
 
javascript代码：
$(function(){

    $("#tt").bigAutocomplete({
        width:543,
        data:[{title:"中国好声音",result:{ff:"qq"}},
        {title:"中国移动网上营业厅"},
        {title:"中国银行"},
        {title:"中国移动"},
        {title:"中国好声音第三期"},
        {title:"中国好声音 第一期"},
        {title:"中国电信网上营业厅"},
        {title:"中国工商银行"},
        {title:"中国好声音第二期"},
        {title:"中国地图"}],
        callback:function(data){
            alert(data.title);    
        }
    });

})

js中data里的result可以不写。

 

2、ajax请求：

html代码：
<input type="text" id="company" value="" class="text" />

javascript代码：

$(function(){
    $("#tt").bigAutocomplete({
        width:543,
        url:‘http://localhost/test/suggestCom‘,
        callback:function(data){
            //alert(data.title);    
        }
    });
})

服务端返回数据格式：

{"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示例）

public function suggestCom(){
        $wd = $_POST[‘keyword‘];
        $keywords = $wd;
    
        $company_model = M(‘Company‘);
    
        $res = $company_model->where("name like ‘%".$keywords."%‘ or abbr like ‘%".$keywords."%‘ ")->limit(10)->select();
        foreach($res as $v){
            $suggestions[]= array(‘title‘ => $v[‘name‘]);
        }
    
        echo json_encode(array(‘data‘ => $suggestions));
    }

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

 

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

jquery.bigautocomplete.js

技术分享 
(function($){
    var bigAutocomplete = new function(){
        this.currentInputText = null;//目前获得光标的输入框（解决一个页面多个输入框绑定自动补全功能）
        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];//键盘上功能键键值数组
        this.holdText = null;//输入框中原始输入的内容
        
        //初始化插入自动补全div，并在document注册mousedown，点击非div区域隐藏div
        this.init = function(){
            $("body").append("<div id=‘bigAutocompleteContent‘ class=‘bigautocomplete-layout‘></div>");
            $(document).bind(‘mousedown‘,function(event){
                var $target = $(event.target);
                if((!($target.parents().andSelf().is(‘#bigAutocompleteContent‘))) && (!$target.is(bigAutocomplete.currentInputText))){
                    bigAutocomplete.hideAutocomplete();
                }
            })
            
            //鼠标悬停时选中当前行
            $("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
                $("#bigAutocompleteContent tr").removeClass("ct");
                $(this).addClass("ct");
            }).delegate("tr", "mouseout", function() {
                $("#bigAutocompleteContent tr").removeClass("ct");
            });        
            
            
            //单击选中行后，选中行内容设置到输入框中，并执行callback函数
            $("#bigAutocompleteContent").delegate("tr", "click", function() {
                bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
                var callback_ = bigAutocomplete.currentInputText.data("config").callback;
                if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
                    callback_($(this).data("jsonData"));
                    
                }                
                bigAutocomplete.hideAutocomplete();
            })            
            
        }
        
        this.autocomplete = function(param){
            
            if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
                bigAutocomplete.init();//初始化信息
            }            
            
            var $this = $(this);//为绑定自动补全功能的输入框jquery对象
            
            var $bigAutocompleteContent = $("#bigAutocompleteContent");
            
            this.config = {
                           //width:下拉框的宽度，默认使用输入框宽度
                           width:$this.outerWidth() - 2,
                           //url：格式url:""用来ajax后台获取数据，返回的数据格式为data参数一样
                           url:null,
                           /*data：格式{data:[{title:null,result:{}},{title:null,result:{}}]}
                           url和data参数只有一个生效，data优先*/
                           data:null,
                           //callback：选中行后按回车或单击时回调的函数
                           callback:null};
            $.extend(this.config,param);
            
            $this.data("config",this.config);
            
            //输入框keydown事件
            $this.keydown(function(event) {
                switch (event.keyCode) {
                case 40://向下键
                    
                    if($bigAutocompleteContent.css("display") == "none")return;
                    
                    var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
                    if($nextSiblingTr.length <= 0){//没有选中行时，选中第一行
                        $nextSiblingTr = $bigAutocompleteContent.find("tr:first");
                    }else{
                        $nextSiblingTr = $nextSiblingTr.next();
                    }
                    $bigAutocompleteContent.find("tr").removeClass("ct");
                    
                    if($nextSiblingTr.length > 0){//有下一行时（不是最后一行）
                        $nextSiblingTr.addClass("ct");//选中的行加背景
                        $this.val($nextSiblingTr.find("div:last").html());//选中行内容设置到输入框中
                        
                        //div滚动到选中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug，数值有问题
                        $bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
                        
                    }else{
                        $this.val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
                    }
                    
                    
                    break;
                case 38://向上键
                    if($bigAutocompleteContent.css("display") == "none")return;
                    
                    var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
                    if($previousSiblingTr.length <= 0){//没有选中行时，选中最后一行行
                        $previousSiblingTr = $bigAutocompleteContent.find("tr:last");
                    }else{
                        $previousSiblingTr = $previousSiblingTr.prev();
                    }
                    $bigAutocompleteContent.find("tr").removeClass("ct");
                    
                    if($previousSiblingTr.length > 0){//有上一行时（不是第一行）
                        $previousSiblingTr.addClass("ct");//选中的行加背景
                        $this.val($previousSiblingTr.find("div:last").html());//选中行内容设置到输入框中
                        
                        //div滚动到选中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug，数值有问题
                        $bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
                    }else{
                        $this.val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
                    }
                    
                    break;
                case 27://ESC键隐藏下拉框
                    
                    bigAutocomplete.hideAutocomplete();
                    break;
                }
            });        
            
            //输入框keyup事件
            $this.keyup(function(event) {
                var k = event.keyCode;
                var ctrl = event.ctrlKey;
                var isFunctionalKey = false;//按下的键是否是功能键
                for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
                    if(k == bigAutocomplete.functionalKeyArray[i]){
                        isFunctionalKey = true;
                        break;
                    }
                }
                //k键值不是功能键或是ctrl+c、ctrl+x时才触发自动补全功能
                if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
                    var config = $this.data("config");
                    
                    var offset = $this.offset();
                    $bigAutocompleteContent.width(config.width);
                    var h = $this.outerHeight() - 1;
                    $bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});
                    
                    var data = config.data;
                    var url = config.url;
                    var keyword_ = $.trim($this.val());
                    if(keyword_ == null || keyword_ == ""){
                        bigAutocomplete.hideAutocomplete();
                        return;
                    }                    
                    if(data != null && $.isArray(data) ){
                        var data_ = new Array();
                        for(var i=0;i<data.length;i++){
                            if(data[i].title.indexOf(keyword_) > -1){
                                data_.push(data[i]);
                            }
                        }
                        
                        makeContAndShow(data_);
                    }else if(url != null && url != ""){//ajax请求数据
                        $.post(url,{keyword:keyword_},function(result){
                            makeContAndShow(result.data)
                        },"json")
                    }

                    
                    bigAutocomplete.holdText = $this.val();
                }
                //回车键
                if(k == 13){
                    var callback_ = $this.data("config").callback;
                    if($bigAutocompleteContent.css("display") != "none"){
                        if(callback_ && $.isFunction(callback_)){
                            callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
                        }
                        $bigAutocompleteContent.hide();                        
                    }
                }
                
            });    
            
                    
            //组装下拉框html内容并显示
            function makeContAndShow(data_){
                if(data_ == null || data_.length <=0 ){
                    return;
                }
                
                var cont = "<table><tbody>";
                for(var i=0;i<data_.length;i++){
                    cont += "<tr><td><div>" + data_[i].title + "</div></td></tr>"
                }
                cont += "</tbody></table>";
                $bigAutocompleteContent.html(cont);
                $bigAutocompleteContent.show();
                
                //每行tr绑定数据，返回给回调函数
                $bigAutocompleteContent.find("tr").each(function(index){
                    $(this).data("jsonData",data_[index]);
                })
            }            
                    
            
            //输入框focus事件
            $this.focus(function(){
                bigAutocomplete.currentInputText = $this;
            });
            
        }
        //隐藏下拉框
        this.hideAutocomplete = function(){
            var $bigAutocompleteContent = $("#bigAutocompleteContent");
            if($bigAutocompleteContent.css("display") != "none"){
                $bigAutocompleteContent.find("tr").removeClass("ct");
                $bigAutocompleteContent.hide();
            }            
        }
        
    };
    
    
    $.fn.bigAutocomplete = bigAutocomplete.autocomplete;
    
})(jQuery)
View Code

jquery.bigautocomplete.css

技术分享 
@charset "utf-8";
.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;}
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}
View Code

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

 

页面html代码：

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现仿搜索引擎文本框自动补全插件</title>


<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/bigautocomplete/jquery.bigautocomplete.js?v=2"></script>
<link rel="stylesheet" href="css/bigautocomplete/jquery.bigautocomplete.css" type="text/css" />
<script type="text/javascript">
$(function(){
    $("#tt").bigAutocomplete({
        width:543,
        url:‘__MODULE__/test/suggestCom‘,
        callback:function(data){
            //alert(data.title);    
        }
    });

})
</script>

</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:720px;margin:30px auto;}
.demo h2{font-size:16px;color:#3366cc;height:30px;}
.demo li{float:left;}
.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;}
.button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
</style>

<div class="demo">
    <h2>bigautocomplete联想输入测试</h2>
    <form action="" method="post" name="searchform" id="searchform" class="searchinfo">
        <ul>
            <li><input type="text" id="tt" value="" class="text" /></li>
            <li><input type="submit" value="搜索" class="button" /></li>
        </ul>
    </form>
</div>

</body>
</html>
View Code

 

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

标签：

原文地址：http://www.cnblogs.com/52fhy/p/4455988.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！