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 相关文章推荐
    半角全角相互转换的js函数
    Oct 16 Javascript
    JS实现的不规则TAB选项卡效果代码
    Sep 18 Javascript
    Javascript基于对象三大特性(封装性、继承性、多态性)
    Jan 04 Javascript
    JavaScript弹出对话框的三种方式
    Mar 23 Javascript
    javascript关于继承解析
    May 10 Javascript
    JavaScript操作表单实例讲解(上)
    Jun 20 Javascript
    JavaScript中获取时间的函数集
    Aug 16 Javascript
    js插件Jcrop自定义截取图片功能
    Oct 14 Javascript
    html中鼠标滚轮事件onmousewheel的处理方法
    Nov 11 Javascript
    Vue input控件通过value绑定动态属性及修饰符的方法
    May 03 Javascript
    Element-ui之ElScrollBar组件滚动条的使用方法
    Sep 14 Javascript
    一文快速详解前端框架 Vue 最强大的功能
    May 21 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 strtotime函数详解
    2009/12/18 PHP
    如何把php5.3版本升级到php5.4或者php5.5
    2015/07/31 PHP
    PHP支付系统设计与典型案例分享
    2016/08/02 PHP
    php 数据结构之链表队列
    2017/10/17 PHP
    PHP开发之用微信远程遥控服务器
    2018/01/25 PHP
    php tpl模板引擎定义与使用示例
    2019/08/09 PHP
    PHP随机生成中文段落示例【测试网站内容时使用】
    2020/04/26 PHP
    $.get获取一个文件的内容示例代码
    2013/09/11 Javascript
    jQuery中get和post方法传值测试及注意事项
    2014/08/08 Javascript
    基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
    2016/06/17 Javascript
    jquery+ajax实现直接提交表单实例分析
    2016/06/17 Javascript
    JQuery动态添加Select的Option元素实现方法
    2016/08/29 Javascript
    Node.js连接MongoDB数据库产生的问题
    2017/02/08 Javascript
    js实现瀑布流效果(自动生成新的内容)
    2017/03/16 Javascript
    使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
    2017/03/21 jQuery
    js实现鼠标拖拽div左右滑动
    2020/01/15 Javascript
    JQuery复选框全选效果如何实现
    2020/05/08 jQuery
    Python sklearn KFold 生成交叉验证数据集的方法
    2018/12/11 Python
    python最小生成树kruskal与prim算法详解
    2019/01/17 Python
    啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
    2019/02/20 Python
    pandas读取csv文件提示不存在的解决方法及原因分析
    2020/04/21 Python
    使用keras根据层名称来初始化网络
    2020/05/21 Python
    如何利用Python动态模拟太阳系运转
    2020/09/04 Python
    收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
    2021/03/18 杂记
    美国著名童装品牌:OshKosh B’gosh
    2016/08/05 全球购物
    德国传统玻璃制造商:Cristalica
    2018/04/23 全球购物
    广州一家公司的.NET面试题
    2016/06/11 面试题
    介绍一下grep命令的使用
    2015/06/12 面试题
    国家助学金获奖感言
    2014/01/31 职场文书
    党员公开承诺事项
    2014/03/25 职场文书
    企业安全生产演讲稿
    2014/05/09 职场文书
    副主任竞聘演讲稿
    2014/08/18 职场文书
    领导干部“四风”查摆问题个人整改措施
    2014/10/28 职场文书
    员工离职感谢信
    2015/01/22 职场文书
    CSS3通过var()和calc()函数实现动画特效
    2021/03/30 HTML / CSS
    【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
    2022/04/01 DOTA