jQuery自动完成插件completer附源码下载
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery自动完成插件pleter的相关资料,需要的朋友可以参考下
我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成,这些都由插件pleter来帮您实现。
效果展示图如下所示:
HTML
首先载入jQuery库和插件pleter.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了。
<script src="jquery.js"></script> <script src="pleter.js"></script> <link href="pleter.css" rel="stylesheet">
接下来我们在页面中需要放置输入框的地方放置如下代码,这是一个要求用户输入邮箱的输入表单。
<input type="text" id="auto-plete-email" class="form-control" placeholder="E-mail">
Javascript
直接$(element).pleter()调用,非常简单,如果不想用函数调用的方式也可以在元素上使用data-toggle="pleter"和data-*属性来调用插件效果。
$(function(){ $("#auto-plete-email").pleter({ separator: "@", source: ["163.", "qq.", "126.", "139.", "gmail.", "hotmail.", "icloud."] }); });
选项设置
选项 | 说明 | 默认值 |
plete | 当输入完成时触发 | function() {} |
itemTag | 弹出展示面板中的列表元素标签 | "li" |
filter | 过滤函数,当输入后会先过滤相关列表内容再展示列表 | function(val) { return val; } |
position | 弹出列表面板相对输入框的位置,值有"", "right", "bottom", "left". | "bottom" |
source | 将要自动补全展示的数据 | [] |
selectedClass | 当弹出面板中的选项被选中时的样式 | "pleter-selected" |
separator | 分隔符,将输入的内容与建议自动完成的部分分隔,如@ | "" |
suggest | 如果设置成true,将会进入建议suggestion模式,将自动匹配所输入的内容 | false |
template | 弹出面板的模板 | "<ul class="pleter-container"></ul>" |
zIndex | 弹出面板的css中的z-index值 | 1 |
Completer插件提供了丰富的选项设置和方法调用。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程