input提示jQuery自动完成插件:completer

input提示jQuery自动完成插件:completer

我们在输入的形式,如输入的邮箱一样,只需要输入邮箱名前面,所以后面的@内容会自动完成,几个常用的电子邮件列表,用户只需要选择填写表格输入。等有时间进入,域名输入可自动完成,这些都是帮助你实现插件完成者。

input提示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"]?
????});?
});?
选项设置

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

选项说明默认值
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弹出面板的模板"<ul class="completer-container"></ul>"
zIndex弹出面板的css中的z-index值1

更多有关completer的内容请关注completer官网地址:https://github.com/fengyuanchen/completer