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 相关文章推荐
    jquery实用代码片段集合
    Aug 12 Javascript
    JQuery入门—编写一个简单的JQuery应用案例
    Jan 03 Javascript
    在JS数组特定索引处指定位置插入元素
    Jul 27 Javascript
    javascript实现表单提交后,提交按钮不可用的方法
    Apr 18 Javascript
    js实现prototype扩展的方法(字符串,日期,数组扩展)
    Jan 14 Javascript
    VUE axios上传图片到七牛的实例代码
    Jul 28 Javascript
    在angular 6中使用 less 的实例代码
    May 13 Javascript
    实例详解BootStrap的动态模态框及静态模态框
    Aug 13 Javascript
    vue elementUI 表单校验功能之数组多层嵌套
    Jun 04 Javascript
    vue实现直播间点赞飘心效果的示例代码
    Sep 20 Javascript
    在HTML中使用JavaScript的两种方法
    Dec 24 Javascript
    微信小程序实现下拉加载更多商品
    Dec 29 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 $_SERVER当前完整url的写法
    2009/11/12 PHP
    header跳转和include包含问题详解
    2012/09/08 PHP
    php定义数组和使用示例(php数组的定义方法)
    2014/03/29 PHP
    PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
    2017/02/06 PHP
    thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
    2018/01/15 PHP
    jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
    2011/06/27 Javascript
    跨域请求之jQuery的ajax jsonp的使用解惑
    2011/10/09 Javascript
    node.js中使用node-schedule实现定时任务实例
    2014/06/03 Javascript
    jQuery简单实现图片预加载
    2015/04/20 Javascript
    js命名空间写法示例
    2015/12/18 Javascript
    Web技术实现移动监测的介绍
    2017/09/18 Javascript
    Angular实现可删除并计算总金额的购物车功能示例
    2017/12/26 Javascript
    vue使用rem实现 移动端屏幕适配
    2018/09/26 Javascript
    JQuery获取元素尺寸、位置及页面滚动事件应用示例
    2019/05/14 jQuery
    微信小程序class封装http代码实例
    2019/08/24 Javascript
    浅析vue-router实现原理及两种模式
    2020/02/11 Javascript
    [06:09]辉夜杯主赛事开幕式
    2015/12/25 DOTA
    [47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
    2018/08/17 DOTA
    详解Python中的join()函数的用法
    2015/04/07 Python
    深入浅出学习python装饰器
    2017/09/29 Python
    Python批量生成幻影坦克图片实例代码
    2019/06/04 Python
    Python画图高斯分布的示例
    2019/07/10 Python
    python 读写文件包含多种编码格式的解决方式
    2019/12/20 Python
    Python安装OpenCV的示例代码
    2020/03/05 Python
    pycharm中使用request和Pytest进行接口测试的方法
    2020/07/31 Python
    Python调用系统命令os.system()和os.popen()的实现
    2020/12/31 Python
    利用canvas实现图片下载功能来实现浏览器兼容问题
    2019/05/31 HTML / CSS
    美容院店长岗位职责
    2014/04/08 职场文书
    法人授权委托书范本
    2014/09/17 职场文书
    三八妇女节标语
    2014/10/09 职场文书
    运动会加油稿20字
    2014/11/15 职场文书
    2014年销售工作总结与计划
    2014/12/01 职场文书
    中学生思想品德评语
    2014/12/31 职场文书
    安全教育主题班会总结
    2015/08/14 职场文书
    中国现代文学之经典散文三篇
    2019/09/18 职场文书
    python中if和elif的区别介绍
    2021/11/07 Python