AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2016-04-22 5357
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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)

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;}

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>

文章标签：
前端开发
JavaScript
数据格式
飞鸿影~
目录
相关文章
魔哈Moha
|
人工智能 开发工具 网络架构
魔哈：Grok国内镜像
xAI 宣布正式开源 3140 亿参数的混合专家（MoE）模型「Grok-1」，以及该模型的权重和网络架构。这也使得Grok-1成为当前参数量最大的开源大语言模型。
魔哈Moha
1091 0
魔哈：Grok国内镜像
yuanfan_2012
|
Linux
记一次CentOS7云主机无法启动的排障解决过程
记一次CentOS7云主机无法启动的排障解决过程
yuanfan_2012
1047 0
Deephub
|
7月前
|
机器学习/深度学习 存储 人工智能
SEARCH-R1: 基于强化学习的大型语言模型多轮搜索与推理框架
SEARCH-R1是一种创新的强化学习框架，使大型语言模型（LLM）具备多轮搜索与推理能力。它通过强化学习自主生成查询并优化基于检索结果的推理，无需人工标注数据。相比传统RAG或工具使用方法，SEARCH-R1显著提升问答性能，在多个数据集上实现26%以上的相对性能提升。其核心优势在于强化学习与搜索的深度融合、交错式多轮推理机制及令牌级损失屏蔽技术，推动了LLM在复杂推理和实时知识获取方面的边界。尽管存在奖励函数设计简化等局限性，SEARCH-R1为构建更智能的交互系统提供了重要参考。
Deephub
556 7
SEARCH-R1: 基于强化学习的大型语言模型多轮搜索与推理框架
lsug6eziqmdfk1111
|
12月前
|
安全 网络协议 物联网
物联网僵尸网络和 DDoS 攻击的 CERT 分析
物联网僵尸网络和 DDoS 攻击的 CERT 分析
lsug6eziqmdfk1111
253 0
MongoDB小助手
|
NoSQL atlas MongoDB
重磅！MongoDB官方文档现已支持中文！抢先浏览！（文末福利）
官宣
MongoDB小助手
3030 2
带你读小助手
|
弹性计算 前端开发 JavaScript
前端开发基础2：VS Code和Edge的联动开发
介绍edge tools， live server两个常用插件的用法。
带你读小助手
851 2
土木林森
|
Prometheus 监控 Cloud Native
【揭秘可观测性】构建完美参考框架，打造系统监控的瑞士军刀！
【8月更文挑战第25天】在现代软件设计中，可观测性是确保系统稳定性和效率的关键因素。它主要由日志、指标及链路追踪（统称LMx）三大核心组件构成。本文详细介绍了构建高效可观测性框架的六个步骤：需求分析、工具选择、数据收集策略设计、实施集成、数据可视化及持续优化。并通过一个Spring Boot应用集成Prometheus和Micrometer收集指标的示例，展示了具体实践方法。合理构建可观测性框架能显著提升团队对软件系统的管理和监控能力，进而增强系统整体性能和可靠性。
土木林森
191 2
acc8226
Markdown 拓展 - 对数学公式的支持
MathJax 和 LaTeX 数学公式 支持 MathJax 是一款运行在浏览器中的开源数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。MathJax 项目于 2009 年开始，发起人有 American Mathematical Society, Design Science等，还有众多的支持者，个人感觉MathJax会成为今后数学符号渲染引擎中的主流，也许现在已经是了。本文接下来会讲述 MathJax 的基础用法，但不涉及MathJax 的安装及配置。
acc8226
537 0
Markdown 拓展 - 对数学公式的支持
八百标兵奔北坡
|
数据采集
IQR法（四分位距法）
IQR法（四分位距法）
八百标兵奔北坡
4654 0
demo123567
|
JavaScript 前端开发 API
axios如何取消请求，其原理是什么？
axios如何取消请求，其原理是什么？
demo123567
668 0

热门文章

最新文章

  • 1
    如何配置 Java 环境变量：设置 JAVA_HOME 和 PATH
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    什么是tomcat？tomcat是干什么用的？
  • 5
    Webpack和Vite的区别
  • 6
    微信小程序：本地开发环境和线上环境配置
  • 7
    数据人必读！玩转数据可视化用这个就够了——高德LOCA API 2.0升级来袭！
  • 8
    Point Grey articles link
  • 9
    数据库负载急剧提高的应急处理(二)
  • 10
    软刀子割肉：智能电视的软陷阱
  • 1
    《政企API网关：安全与性能平衡的转型实践》
    37
  • 2
    《SaaS网关多租户治理：从串流到稳控的实践》
    30
  • 3
    从DQN到Double DQN：分离动作选择与价值评估，解决强化学习中的Q值过估计问题
    32
  • 4
    Aquarius 官方发布 3 级海面密度标准映射图像季节性数据 V5.0
    73
  • 5
    【Azure App Service】Root CA on App Service
    46
  • 6
    基于springboot的非遗传承宣传平台
    47
  • 7
    Proxmox Mail Gateway 9.0 正式版发布 - 全面的开源邮件安全平台
    36
  • 8
    VMware NSX 9.0.1.0 发布 - 下一代网络安全虚拟化平台
    64
  • 9
    爬坑 10 年！京东店铺全量商品接口实战开发：从分页优化、SKU 关联到数据完整性闭环
    39
  • 10
    VMware vSphere 9.0.1.0 发布 - 企业级工作负载平台
    35

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费