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自动完成插件(autocomplete)应用之PHP版
于工作中需要用到自动提示这个功能,呵呵,自己又是js小菜,于是百度了一下,找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能,于是down下来了改成了php版的,并加了支持向上/向下选择文字等功能,放上来共享一下,纯体力活... :) 1.下载jquery库,网址:http://jquery.com/ : 2.下载jquery autocomplete插件或者直接使用我附件里提供的文件,自己下载下来的文件需要修改一些内容才能支持向上/向下选择文字.解决中文乱码,
-
jquery autocomplete自动完成插件的的使用方法
首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple
-
jquery自动补齐功能插件flexselect用法示例
本文实例讲述了jquery自动补齐功能插件flexselect用法.分享给大家供大家参考,具体如下: 这几天正在做一个东东.需要用到自动补齐的功能.也就是select控件的文本项可以让它写.默认的select文本框是只读的,不能写.在网上找到一个jQuery插件:flexselect可以完成这项功能. 将插件放到项目里.然后在页面中引用这个插件. <script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2
-
jQuery Autocomplete自动完成插件
相对于同类插件,他的特色有3点. 1.可缓存查询结果 (二次查询速度快) 2.非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题) 3.简洁的参数 (好看?) 插件性能尚好,我的E6500.2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒:百度的是2432次调用,80.24毫秒. 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教. 调用方法 复制代码 代码如下: jQuery("#kw").suggest
-
Jquery插件仿百度搜索关键字自动匹配功能
本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr
-
jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll
-
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo
-
jQuery autocomplate 自扩展插件、自动完成示例代码
复制代码 代码如下: 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplate.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px solid black", "background-color": "white", "position": &quo
-
jQuery自动完成插件completer附源码下载
我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入.诸如此类的还有时间的输入.域名的输入都能自动完成,这些都由插件completer来帮您实现. 效果展示图如下所示: 效果展示 源码下载 HTML 首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了. <script src="jquery.js"><
-
Jquery 垂直多级手风琴菜单附源码下载
首先给大家展示下效果图,喜欢的朋友继续往下看哦. 这是一款简单但实用的多级垂直手风琴下拉列表菜单.该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果. 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作.如果需要一些好看的动画效果,可以实用插件中提供的main.js文件,它可以提供菜单打开和收缩时左侧小箭头的动画效果. 效果演示 源码下载 使用方法 HTML结构 该多级手风琴菜单的HTML结构非常简单:整个手风琴是一个无
-
基于jQuery实现的扇形定时器附源码下载
效果图如下所示: 效果演示 源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色.宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试.限时抢购的场景. HTML 首先加载jquery库文件和pietimer.js文件. <script src="jquery.min.js"></script> <script src="jqu
-
jQuery实现产品对比功能附源码下载
产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示 下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时
-
JQuery自适应窗口大小导航菜单附源码下载
效果图如下: 查看演示 源码下载 html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwMenu"> <li><a class="selected&qu
-
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示 源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse
-
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示 源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"
-
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示 源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
-
jQuery日期范围选择器附源码下载
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示 下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs
-
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）
今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示 源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.