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 相关文章推荐
    动态创建的表格单元格中的事件实现代码
    Dec 30 Javascript
    Jquery节点遍历next与nextAll方法使用示例
    Jul 22 Javascript
    JavaScript对象数组排序函数及六个用法
    Dec 23 Javascript
    jQuery tagsinput在h5邮件客户端中应用详解
    Sep 26 Javascript
    BootStrap 获得轮播中的索引和当前活动的焦点对象
    May 11 Javascript
    JavaScript之iterable_动力节点Java学院整理
    Jun 29 Javascript
    Angular实现的内置过滤器orderBy排序与模糊查询功能示例
    Dec 29 Javascript
    vue基于element的区间选择组件
    Sep 07 Javascript
    node.js之基础加密算法模块crypto详解
    Sep 11 Javascript
    javascript实现导航栏分页效果
    Jun 27 Javascript
    vue 动态表单开发方法案例详解
    Dec 02 Javascript
    js实现上传图片到服务器
    Apr 11 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中利用XML技术构造远程服务(上)
    2006/10/09 PHP
    PHP中的cookie不用刷新就生效的方法
    2012/02/04 PHP
    PHP的preg_match匹配字符串长度问题解决方法
    2014/05/03 PHP
    PHP IDE phpstorm 常用快捷键
    2015/05/18 PHP
    PHP实现页面静态化的超简单方法
    2016/09/06 PHP
    Yii框架小部件(Widgets)用法实例详解
    2020/05/15 PHP
    编辑浪子版表单验证类
    2007/05/12 Javascript
    jQuery 第二课 操作包装集元素代码
    2010/03/14 Javascript
    js 采用delete实现继承示例代码
    2014/05/20 Javascript
    详细解读JavaScript的跨浏览器事件处理
    2015/08/12 Javascript
    基于jQuery全屏焦点图左右切换插件responsiveslides
    2015/09/07 Javascript
    利用iscroll4实现轮播图效果实例代码
    2017/01/11 Javascript
    使用ES6语法重构React代码详解
    2017/05/09 Javascript
    前后端如何实现登录token拦截校验详解
    2018/09/03 Javascript
    微信小程序 wx:for遍历循环使用实例解析
    2019/09/09 Javascript
    使用layui+ajax实现简单的菜单权限管理及排序的方法
    2019/09/10 Javascript
    Vue v-for循环之@click点击事件获取元素示例
    2019/11/09 Javascript
    vue中watch的用法汇总
    2020/12/28 Vue.js
    [51:34]Ti4主赛事胜者组 DK vs EG 2
    2014/07/19 DOTA
    Python 面向对象 成员的访问约束
    2008/12/23 Python
    python实现猜拳小游戏
    2020/04/05 Python
    Python装饰器使用你可能不知道的几种姿势
    2019/10/25 Python
    pytorch中的上采样以及各种反操作,求逆操作详解
    2020/01/03 Python
    python全局变量引用与修改过程解析
    2020/01/07 Python
    python中常用的数据结构介绍
    2021/01/12 Python
    python 装饰器重要在哪
    2021/02/14 Python
    canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
    2018/01/10 HTML / CSS
    iframe与window.onload如何使用详解
    2020/05/07 HTML / CSS
    如何掌握自荐信格式呢
    2013/11/19 职场文书
    结婚邀请函范文
    2014/01/14 职场文书
    八年级物理教学反思
    2014/01/19 职场文书
    消防宣传口号
    2014/06/16 职场文书
    党员干部群众路线教育实践活动个人对照检查材料
    2014/09/23 职场文书
    2015年信访维稳工作总结
    2015/04/07 职场文书
    2015学校年度工作总结
    2015/05/11 职场文书
    人民调解协议书
    2016/03/21 职场文书