jQuery自动完成插件completer附源码下载


Posted in Javascript onJanuary 04, 2016

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成,这些都由插件completer来帮您实现。

效果展示图如下所示:

jQuery自动完成插件completer附源码下载

效果展示       源码下载

HTML

首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了。

<script src="jquery.js"></script> 
<script src="completer.js"></script> 
<link href="completer.css" rel="stylesheet">

接下来我们在页面中需要放置输入框的地方放置如下代码,这是一个要求用户输入邮箱的输入表单。

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">

Javascript

直接$(element).completer()调用,非常简单,如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。

$(function(){ 
 $("#auto-complete-email").completer({ 
  separator: "@", 
  source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"] 
 }); 
});

选项设置

选项 说明 默认值
complete 当输入完成时触发 function() {}
itemTag 弹出展示面板中的列表元素标签 "li"
filter 过滤函数,当输入后会先过滤相关列表内容再展示列表 function(val) { return val; }
position 弹出列表面板相对输入框的位置,值有"top", "right", "bottom", "left". "bottom"
source 将要自动补全展示的数据 []
selectedClass 当弹出面板中的选项被选中时的样式 "completer-selected"
separator 分隔符,将输入的内容与建议自动完成的部分分隔,如@ ""
suggest 如果设置成true,将会进入建议suggestion模式,将自动匹配所输入的内容 false
template 弹出面板的模板 "
    "
    zIndex 弹出面板的css中的z-index值 1

    Completer插件提供了丰富的选项设置和方法调用。

    Javascript 相关文章推荐
    jscript之List Excel Color Values
    Jun 13 Javascript
    js 表格隔行颜色
    Dec 02 Javascript
    原生js 秒表实现代码
    Jul 24 Javascript
    JS+CSS实现一个气泡提示框
    Aug 18 Javascript
    使用javaScript动态加载Js文件和Css文件
    Oct 24 Javascript
    浅谈Javascript数据属性与访问器属性
    Jul 26 Javascript
    用AngularJS来实现监察表单按钮的禁用效果
    Nov 02 Javascript
    bootstrap table支持高度百分比的实例代码
    Feb 28 Javascript
    vue.js实现回到顶部动画效果
    Jul 31 Javascript
    微信小程序自定义弹出层效果
    May 26 Javascript
    微信小程序中的列表切换功能实例代码详解
    Jun 09 Javascript
    用React Native制作一个简单的游戏引擎
    May 27 Javascript
    学习javascript面向对象 理解javascript对象
    Jan 04 #Javascript
    基于JavaScript实现移除(删除)数组中指定元素
    Jan 04 #Javascript
    实例代码详解javascript实现窗口抖动及qq窗口抖动
    Jan 04 #Javascript
    javascript基础语法学习笔记
    Jan 04 #Javascript
    封装好的javascript前端分页插件pagination
    Jan 04 #Javascript
    详解javascript的变量与标识符
    Jan 04 #Javascript
    bootstrap实现弹窗和拖动效果
    Jan 03 #Javascript
    You might like
    深入解析PHP中的(伪)多线程与多进程
    2013/07/01 PHP
    thinkphp3.2.2前后台公用类架构问题分析
    2014/11/25 PHP
    php将字符串转换成16进制的方法
    2015/03/17 PHP
    PHP反射机制原理与用法详解
    2017/02/15 PHP
    PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
    2017/05/15 PHP
    为何说PHP引用是个坑,要慎用
    2018/04/02 PHP
    PHP实现的微信APP支付功能示例【基于TP5框架】
    2019/09/16 PHP
    php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
    2020/06/06 PHP
    js函数调用常用方法详解
    2012/12/03 Javascript
    设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
    2014/01/07 Javascript
    无刷新预览所选择的图片示例代码
    2014/04/02 Javascript
    基于jQuery通过jQuery.form.js插件实现异步上传
    2015/12/13 Javascript
    jQuery插件fullPage.js实现全屏滚动效果
    2016/12/02 Javascript
    Node.js中如何合并两个复杂对象详解
    2016/12/31 Javascript
    详解webpack之scss和postcss-loader的配置
    2018/01/09 Javascript
    JS函数进阶之prototy用法实例分析
    2020/01/15 Javascript
    小程序实现密码输入框
    2020/11/16 Javascript
    用python实现的去除win下文本文件头部BOM的代码
    2013/02/10 Python
    python实现一个简单的并查集的示例代码
    2018/03/19 Python
    Python实现发送与接收邮件的方法详解
    2018/03/28 Python
    在python环境下运用kafka对数据进行实时传输的方法
    2018/12/27 Python
    Python实现的在特定目录下导入模块功能分析
    2019/02/11 Python
    django drf框架中的user验证以及JWT拓展的介绍
    2019/08/12 Python
    python3.7添加dlib模块的方法
    2020/07/01 Python
    python简单利用字典破解zip文件口令
    2020/09/07 Python
    html5绘制时钟动画
    2014/12/15 HTML / CSS
    蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
    2017/08/27 全球购物
    英国探险旅游专家:Explore
    2018/12/20 全球购物
    美国伴娘礼服商店:Evening Collective
    2019/10/07 全球购物
    世界排名第一的运动鞋市场:Flight Club
    2020/01/03 全球购物
    电大毕业生自我鉴定
    2013/11/10 职场文书
    财务会计应届生求职信
    2013/11/24 职场文书
    个人贷款收入证明
    2014/10/26 职场文书
    团日活动总结格式
    2015/05/11 职场文书
    Java获取e.printStackTrace()打印的信息方式
    2021/08/07 Java/Android
    Mysql事务索引知识汇总
    2022/03/17 MySQL