文档章节

使用jQuery Autocomplete(自动完成)插件

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 1077
阅读 86
收藏 0
点赞 1
评论 1

 

jQuery 的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下。

最简单的Autocomplete(自动完成)代码片段

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var websites = [
	"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent", 
	"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
	$("#website").autocomplete(websites);	
});
</script>
1
2
3
4
5
6
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div>

我们可以看到效果

jQuery Autocomplete Plugin

这么几行代码就完成了自动完成功能,真实太强了,不过bassistance.de的jQuery Autocomplete插件还有更丰富的功能,它的文档在http://docs.jquery.com/Plugins/Autocomplete ,在API Documentation里,我们要仔细的研究一下autocomplete( url or data, [options] )方法。

autocomplete方法有两个参数,第一个用来填写URL地址或是数据,jQuery Autocomplete插件是支持Ajax方式调用数据,所以可以填写调用的地址,另外可以直接填写数据,格式为JavaScript数组,如我们的例子,autocomplete的另外一个参数 [options]是一个可选项,我们在例子中就没有写,但这个参数里面却有很多可配置的参数,我们还是先修改上面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$().ready(function() {
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
});

在options项我们增加了好几个参数

minChars表示在自动完成激活之前填入的最小字符,这里我们设置为0,在我们双击文本框,不输入字符的时候,就会把数据显示出来,效果如下

jquery-autocomplete-21

max表示列表里的条目数,我们设置了5,所以显示5条,也如上图

autoFill表示自动填充,就是在文本框中自动填充符合条件的项目,看下图,在我们输入“g”的时候,文本框里填充了“google”

jQuery Autocomplete Plugin

mustMatch表示必须匹配条目,也就是在文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空

matchContains表示包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示,比如在上面的图中,我们输入了“g”,由于“Sogou”中也包含一个“g”,所以会显示出来,如果将matchContains设为fasle,则“Sogou”就不会显示

scrollHeight不用多解释,看文档就知道。

后面3个参数formatItem、formatMatch、formatResult非常有用,formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体,formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。

[options]里还有很多有用的参数,大家可以看它的文档。

jQuery Autocomplete插件里还有两个重要的方法,一个是result( handler ),一个是search( ),比如用户在选定了某个条目时需要触发一些别的方法时,着两个方法就可以起作用了,我们再修改以上的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$().ready(function() {
 
	function findValueCallback(event, data, formatted) {
		$("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");
	}
 
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
	$("#website").result(findValueCallback);
	$("#getvalue").click(function() {$("#website").search()});
});

看看是什么效果,会在content div的地方显示出我们选择的内容。

jQuery Autocomplete插件所带的例子还是很好的,大家可以仔细研究一下它的例子,更加灵活的运用jQuery Autocomplete插件。

 

PS:附加一点界面上的模糊搜索功能:

 

// 模糊搜索

$("#blurQueryCond_value").keyup(function() {

$("#cacheInstanceList_body tr").hide();

var $d = $("#cacheInstanceList_body tr").filter(":contains('" + $.trim($("#blurQueryCond_value").val()) + "')");

$d.show();

}

);

 

© 著作权归作者所有

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 105
码字总数 63036
作品 0
南京
架构师
加载中

评论(1)

【转】solr+ajax智能拼音详解---solr跨域请求

  本文转自:http://blog.csdn.net/wangzhaodong001/article/details/8529090 最近刚做完solr的ajax智能拼音。总结一下。 前端:jQueryAutoComplete插件。插件详见http://download.csdn.ne...

无声胜有声 ⋅ 2015/12/16 ⋅ 0

自定义Gradle插件相关知识

插件 Gradle内核本身提供的自动化构建功能十分有限,所有实际的功能都是通过插件的形势提供的,如编译Java代码的功能。通过插件可以: 1. 添加新的Tasks,比如JavaCompile Task 2. 在Gradle中...

JackMeGo ⋅ 2017/06/13 ⋅ 0

Eclipse For PHP代码实现自动换行功能

使用习惯了Visual Studio 2010的代码自动换行功能,在使用Eclipse For PHP写代码的时候,看着代码不能自动换行,感觉非常的别扭,搜索发现,Eclipse For PHP没有自动换行的功能,但是有插件支...

helicon80 ⋅ 2016/04/19 ⋅ 0

第一章:Maven环境下如何配置QueryDSL环境

QueryDSL是一个通用的查询框架,框架的核心原则是创建安全类型的查询,开始QueryDSL仅支持Hibernate(HQL),在不断开源人士加入QueryDSL团队后,陆续发布了针对JPA,JDO,JDBC,Lucene,Hib...

恒宇少年 ⋅ 2017/07/01 ⋅ 0

开发者的实用 Vim 插件(一)

作为 Vi 的升级版,Vim 毫无争议是 Linux 中最受欢迎的命令行编辑器之一。除了是一个多功能编辑器外,世界各地的软件开发者将 Vim 当做 IDE(集成开发环境Integrated Development Environmen...

局长 ⋅ 2016/10/28 ⋅ 24

RunJS 新增“个性插件”机制,打造你自己的 RunJS

RunJS 的编辑器是一个 JavaScript 代码量不小的应用,提供的功能特性和个性化可能未能满足您的要求,现在有了 “个性插件” 机制,你可以着手打造自己的 RunJS 编辑器了。 1、个性插件能干什...

彭博 ⋅ 2012/12/14 ⋅ 11

Android Studio 常用插件收集

> 工欲善其事,必先利其器,本文收集一些实用的studio插件,持续更新 GsonFormat GsonFormat是一个快速格式化json数据,自动生成实体类参数的插件。地址:https://github.com/zzz40500/GsonF...

Will_ls ⋅ 01/06 ⋅ 0

myeclipse6.5插件Veloeclipse的安装

一。插件Veloeclipse的安装: 声明:myeclipse版本:6.5 在Eclipse的Help->Software Updates->Find and Install..->Searchfor new features to install, 点击“new Remote Site...”,增加 ......

asdtiang ⋅ 2010/02/22 ⋅ 0

利用HTML5与jQuery技术创建一个简单的自动表单完成

来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的jQuery Autoco...

gbin1 ⋅ 2013/08/28 ⋅ 0

ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑 ⋅ 2017/12/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud相关项目

Spring Cloud Config 配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储、Git以及Subversion。 Spring Cloud Bus 事件、消息总线,用于在集群(例如,配...

明理萝 ⋅ 27分钟前 ⋅ 1

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 33分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 38分钟前 ⋅ 0

Succinct Data Structure

作者:唐刘 最近看了一篇论文 SuRF: Practical Range Query Filtering with Fast Succinct Tries,里面提到使用一种新的数据结构 Succinct Range Filter(SuRF) 替换掉了 RocksDB 默认的 Bloo...

TiDB ⋅ 39分钟前 ⋅ 0

Java进阶之内存模型介绍

Java进阶之内存模型介绍 前言 不管在什么编程语言里面,读取和写入都是我们程序最普遍的操作,在单线程的程序里面我们可能不关注线程的读写问题,但是一旦到多线程的环境下,读和写就会变得非...

九劫散仙 ⋅ 40分钟前 ⋅ 0

在windows上搭建一个ftp服务器

一、关于ftp FTP 是File Transfer Protocol的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序。基于不同的操作系统有不同的FTP应用程序...

zctzl ⋅ 44分钟前 ⋅ 0

JDK8 排序

import java.util.Collections;import java.util.List;import java.util.ArrayList;import java.util.Comparator; public class JavaTest { public static void main(String......

Jeam_ ⋅ 54分钟前 ⋅ 0

api管理平台汇总

swagger crapApi RAP xxl-api apidoc

facula ⋅ 55分钟前 ⋅ 0

Java 11 快要来了,编译 & 运行一个命令搞定!

Java 11 马上要来了,原定于 9 月发布,还有不到 3 个月了,敬请期待更多新功能被加入到 11 当中,本文本讲的是 JEP 330 这个新特性。 化繁为简,一个命令编译运行源代码 看下面的代码。 //...

Java技术栈 ⋅ 57分钟前 ⋅ 0

谷歌运营了一年多的无人出租车,得出了四条宝贵的经验

简评:并不是谷歌运营,不过国内对 Waymo 不敏感,就标题党了一下请多谅解。另外网友对于无人出租车是认可的,但是觉得如果价格没有优势,还是回去乘坐人类驾驶的汽车,毕竟这是人家的经济来...

极光推送 ⋅ 57分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部