jQuery自动完成插件completer附源码下载(jquery自定义插件)

编辑：rootadmin

推荐整理分享jQuery自动完成插件completer附源码下载(jquery自定义插件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery自动点击按钮,jquery自动加载的方法,jquery自动完成插件,jquery自执行,jquery自动点击按钮,jquery自动完成插件,jquery自动点击按钮,jquery自动加载的方法,内容如对您有帮助，希望把文章链接给更多的朋友！

我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件completer来帮您实现。

效果展示图如下所示：

效果展示源码下载

HTML

首先载入jQuery库和插件completer.js，当然还有相关CSS样式文件，这些都在源码下载里已打包好了。

接下来我们在页面中需要放置输入框的地方放置如下代码，这是一个要求用户输入邮箱的输入表单。

Javascript

直接$(element).completer()调用，非常简单，如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。

选项设置

选项说明默认值 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插件之jQuery.Form.js用法实例分析(附demo示例源码) 本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考，具体如下：一、jQuery.Form.js插件的作用是实现Ajax提交表单。方法：1.formSerilize()用

jquery中cookie用法实例详解(获取,存储,删除等) 本文实例讲述了jquery中cookie用法。分享给大家供大家参考，具体如下：cookie在jquery中有指定的cookie操作类，下面我先来介绍我们在使用cookie操作类时的

基于jQuery实现交互体验社会化分享代码附源码下载先给大家展示下效果图，看看是不是亲想要的效果，如果满足您的要求请继续往下阅读。效果展示源码下载基于jQuery交互体验社会化分享代码。这是一