jQuery自动完成插件completer附源码下载

更新时间：2016年01月04日 09:51:32 投稿：mrr

这篇文章主要介绍了jQuery自动完成插件completer的相关资料,需要的朋友可以参考下

我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件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	弹出面板的模板	"<ul class="completer-container"></ul>"
zIndex	弹出面板的css中的z-index值	1

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

您可能感兴趣的文章:

jQuery UI实现动画效果代码分享
这篇文章给大家总结了jQuery UI实现动画效果的实例代码，有需要的朋友们可以参考测试下。
2018-08-08
Easyui笔记2：实现datagrid多行删除的示例代码
本篇文章主要介绍了Easyui笔记2：实现datagrid多行删除，详细介绍了完成一个多行勾选并删除的功能。有兴趣的可以了解一下。
2017-01-01
jQuery1.4.2与老版本json格式兼容的解决方法
原来使用jQuery1.3.2编写的代码，更换到1.4.2后，使用jQuery.ajax()加载的json文件，不能正常加载。(使用jQuery.getJSON()也一样)
2011-02-02
jQuery操作css方法的超全用法
最近看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴,下面这篇文章主要给大家介绍了关于jQuery操作css方法的超全用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
jQuery .attr()和.removeAttr()方法操作元素属性示例
本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取，添加，修改，删除元素的属性，不会的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
jQuery验证插件 Validate详解
validate是一款很好的jq插件,提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
2014-11-11
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
这篇文章主要介绍了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法,可实现页面滚动的时候指定位置悬浮固定的效果,涉及jquery针对页面元素属性的动态操作技巧,需要的朋友可以参考下
2015-08-08
jQuery设置单选按钮radio选中/不可用的实例代码
这篇文章主要介绍了jQuery设置单选按钮radio选中/不可用的实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
推荐6款基于jQuery实现图片效果插件
这里给大家汇总了一下个人比较常用的基于jQuery实现的图片特效的插件，个人感觉非常不错，这里分享给大家
2014-12-12
jQuery的内容过滤选择器学习教程
这篇文章主要介绍了jQuery的内容过滤选择器学习教程,详细地整理了jQuery中四个过滤器的相关函数用法,需要的朋友可以参考下
2016-04-04