jQueryUI Autocomplete插件使用入门教程(最新版)
jQuery，无需多作介绍，相信各位读者都应该接触或使用过了。jQuery UI，简而言之，它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。今天，我们就来介绍jQuery UI中一个功能非常强大的部件Autocomplete。Autocomplete，是一个功能强大的自动完成输入的jQuery插件，它也是jQuery UI的一部分。相信用过百度或者Google搜索的读者一定不会陌生，当我们在搜索框中开始输入搜索的关键字时，搜索引擎就会智能地帮我们联想并匹配我们所需的搜索关键字内容。Google搜索输入框的自动完成功能现在，我们使用jQuery UI的Autocomplete部件就可以非常简单方便地实现如上述图片中Google搜索框所具备的自动完成功能。jQuery UI 的当前最新版本为1.10.4。由于不同版本之间的用法也有所差异，其他网站关于之前版本的Autocomplete用法介绍并不能完全适用于最新版本。因此，我们有必要了解一下jQuery UI Autocomplete的最新用法。在使用Autocomplete实现自动完成功能之前，我们先来完成一些准备工作。比如，先编写包含如下代码的html文件：&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&jQuery Autocomplete入门示例&/title&
&label for=&language&&请输入指定的语言：&/lable&
&input id=&language& name=&language& type=&text&&
&/html&对应的运行效果如下：input.png在完成上述准备工作之后，我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&jQuery Autocomplete入门示例&/title&
&!-- 引入jQuery UI的css文件 --&
&link href=&/ui/1.10.4/themes/ui-darkness/jquery-ui.css& /&
&!-- 引入jQuery的js文件 --&
&script type=&text/javascript& src=&/jquery-1.9.1.js& &&/script&
&!-- 引入jQuery UI的js文件 --&
&script type=&text/javascript& src=&/ui/1.10.4/jquery-ui.js& &&/script&
&label for=&language&&请输入指定的语言：&/lable&
&input id=&language& name=&language& type=&text&&
&/html&现在，我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能，我们需要如下调用jQuery UI扩展的autocomplete()方法：$(&#language&).autocomplete(optionsObj);这里的optionsObj是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考的相关说明来设置该对象。Autocomplete有一个非常重要的属性参数source，它表示用于自动完成功能的数据集合。source属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；它还可以是一个回调函数，以便于完成一些复杂的数据处理。现在，我们就使用最简单的方式，给source属性指定一个静态的数组，来初步实现自动完成功能。$(&#language&).autocomplete({
&Chinese&,
&English&,
&Spanish&,
&Russian&,
&Japanese&,
});此时，使用浏览器访问该html页面就会发现，我们已经完成的最基本的自动完成功能了。使用autocomplete实现基本的自动完成功能不过，有些时候我们希望列表显示的文本和实际输入的值并不一致。此时，我们为source指定多个对象的数组，每个对象必须包含label和value属性，label表示显示的文本，value表示实际输入的值(当然它也可以包括其他属性，你可以自行进行相关操作)。$(&#language&).autocomplete({
// 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值
{ label: &Chinese&, value: 1 },
{ label: &English&, value: 2 },
{ label: &Spanish&, value: 3 },
{ label: &Russian&, value: 4 },
{ label: &French&, value: 5 },
{ label: &Japanese&, value: 6 },
// 最上面由多个字符串组成的数组，会被视为label和value值相同、均为该字符串的对象更多的时候，我们希望该输入框显示的还是label属性值，但还要给另外的元素(例如隐藏文本域)设置value属性值，或者做一些其他处理。我们可以使用select事件来协助处理。$(&#language&).autocomplete({
// 静态的数据源
{ label: &Chinese&, value: 1, sayHi: &你好& },
{ label: &English&, value: 2, sayHi: &Hello& },
{ label: &Spanish&, value: 3, sayHi: &Hola& },
{ label: &Russian&, value: 4, sayHi: &Привет& },
{ label: &French&, value: 5, sayHi: &Bonjour& },
{ label: &Japanese&, value: 6, sayHi: &こんにちは& },
select: function(event, ui){
// 这里的this指向当前输入框的DOM元素
// event参数是事件对象
// ui对象只有一个item属性，对应数据源中被选中的对象
$(this).value = ui.item.
$(&#lang_id&).val( ui.item.value );
$(&#sayHi&).html( ui.item.sayHi );
// 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
event.preventDefault();
});在实际应用上，我们的数据源并不是一成不变的。大多数情况下，我们的数据都保存在数据库中，此时，我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。$(&#language&).autocomplete({
source: &public.php&
});对应的 ajax-actions.php 的服务器页面代码如下：&?php
header('Content-Type:text/charset=UTF-8');
//为了方便举例，这里使用数组来模拟，你也可以在实际应用中从数据库中读取数据
//返回的数据最好是数组或对象类型的JSON格式字符串
$languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');
echo json_encode($languages);
?&此时，我们再次访问该页面，我们仍然可以看到自动完成的输入效果。从远程服务器获取数据的自动完成功能注意：细心的读者可能已经注意到了，不管是从js数组中获取数据，还是从后台服务器获取数据，我们的数据并没有发生变化；但是，我们在从后台获取数据的页面输入&c&时，显示了所有的数据项，而不是如之前一样只显示筛选过滤之后的&Chinese&和&French&。这是因为，当我们从远程请求获取数据时，Autocomplete认为服务器已经进行了过滤处理，返回的数据都是直接可用的，无需再过滤。在发送AJAX请求时，Autocomplete会把当前输入框中的文字以默认参数名term的形式追加到我们设置的URL地址后面。当我们输入一个c时，Autocomplete实际发送的请求路径为/ajax-actions.php?term=c。在上面的实例中，由于我们使用的是php数组来模拟服务器返回的数据，没有根据用户的输入来返回对应的数据，才会导致上述结果。如果在实际应用中，使用类似如下SQL语句来查询数据，则不会存在该问题。&?php
// 注意：对于用户输入一般需要进行额外的安全处理
$term = $_GET['term'];
$sql = &select column1 as label, column2 as value, ... from table1 where column1 like '$term%'&;
$languages = query($sql);
echo json_encode($languages);
?&此外，有些时候我们需要根据用户的输入或其他操作来构造不同的请求URL，我们可以为source指定函数。Autocomplete将用户输入交给该函数，该函数可以进行任何处理，然后把通过任何方式获得的数据交给Autocomplete处理即可。$(&#language&).autocomplete({
// 通过函数来获取并处理数据源
source: function(request, response){
// request对象只有一个term属性，对应用户输入的文本
// response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
// 自行处理并获取数据...
var dataObj = [...]; // 表示处理后的JSON数据
response(dataObj); // 最后将数据交给autocomplete去展示
});在上面的讲解中，我们介绍了autocomplete的必需参数选项source。除此之外，还有许多的参数选项可以给我们提供更加强大的其他辅助功能。请参考以下文章：
我们认为：
用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
CodePlayer技术交流群1：
帮朋友打一个硬广告：
P2P网贷系统(Java版本) 新年低价大促销，多年P2P技术积累，系统功能完善（可按需定制，可支持第三方存管、银行存管），架构稳定灵活、性能优异、二次开发快速简单。
另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。
外行看热闹，内行看门道。可以自信地认为，在系统设计上，比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构，货比三家，再决定是否购买。
也可推荐他人购买，一旦完全成交，推荐人可获得实际售价 10% 的返现。
有意向者，详情请
联系，工作时间立即回复。
打开导航菜单温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
当使用maven中央库中的快照版（带"-SNAPSHOT"的版本）时，需要在pom.xml中添加如下配置：
&repositories&
&repository&
&id&sonatype-nexus-snapshots&/id&
&name&Sonatype Nexus Snapshots&/name&
&url&http://oss.sonatype.org/content/repositories/snapshots&/url&
&releases&
&enabled&false&/enabled&
&/releases&
&snapshots&
&enabled&true&/enabled&
&/snapshots&
&/repository&
&/repositories&
2. 在Mybatis配置xml中配置拦截器插件:
plugins在配置文件中的位置必须符合要求，否则会报错，顺序如下:
properties?, settings?,
typeAliases?, typeHandlers?,
objectFactory?,objectWrapperFactory?,
environments?, databaseIdProvider?, mappers?
&!-- com.github.pagehelper为PageHelper类所在包名 --&
&plugin interceptor="com.github.pagehelper.PageHelper"&
&!-- 4.0.0以后版本可以不设置该参数 --&
&property name="dialect" value="mysql"/&
&!-- 该参数默认为false --&
&!-- 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 --&
&!-- 和startPage中的pageNum效果一样--&
&property name="offsetAsPageNum" value="true"/&
&!-- 该参数默认为false --&
&!-- 设置为true时，使用RowBounds分页会进行count查询 --&
&property name="rowBoundsWithCount" value="true"/&
&!-- 设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 --&
&!-- （相当于没有执行分页查询，但是返回结果仍然是Page类型）--&
&property name="pageSizeZero" value="true"/&
&!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 --&
&!-- 启用合理化时，如果pageNum&1会查询第一页，如果pageNum&pages会查询最后一页 --&
&!-- 禁用合理化时，如果pageNum&1或pageNum&pages会返回空数据 --&
&property name="reasonable" value="false"/&
&!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 --&
&!-- 增加了一个`params`参数来配置参数映射，用于从Map或ServletRequest中取值 --&
&!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值 --&
&!-- 不理解该含义的前提下，不要随便复制该配置 --&
&property name="params" value="pageNum=pageHelperSpageSize=pageHelperR"/&
&!-- 支持通过Mapper接口参数来传递分页参数 --&
&property name="supportMethodsArguments" value="false"/&
&!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page --&
&property name="returnPageInfo" value="none"/&
&/plugins&
这里的com.github.pagehelper.PageHelper使用完整的类路径。
其他五个参数说明：
增加dialect属性，使用时可以指定该属性（不指定的情况下，分页插件会自动判断），可选值为oracle,mysql,mariadb,sqlite,hsqldb,postgresql,db2,sqlserver,informix,h2,sqlserver2012。
增加offsetAsPageNum属性，默认值为false，使用默认值时不需要增加该配置，需要设为true时，需要配置该参数。当该参数设置为true时，使用RowBounds分页时，会将offset参数当成pageNum使用，可以用页码和页面大小两个参数进行分页。
增加rowBoundsWithCount属性，默认值为false，使用默认值时不需要增加该配置，需要设为true时，需要配置该参数。当该参数设置为true时，使用RowBounds分页会进行count查询。
增加pageSizeZero属性，默认值为false，使用默认值时不需要增加该配置，需要设为true时，需要配置该参数。当该参数设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果（相当于没有执行分页查询，但是返回结果仍然是Page类型）。
增加reasonable属性，默认值为false，使用默认值时不需要增加该配置，需要设为true时，需要配置该参数。具体作用请看上面配置文件中的注释内容。
为了支持startPage(Object params)方法，增加了一个params参数来配置参数映射，用于从Map或ServletRequest中取值，可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值。
supportMethodsArguments支持通过Mapper接口参数来传递分页参数，默认值false，具体用法参考com.github.pagehelper.test.basic包下的ArgumentsMapTest和ArgumentsObjTest测试类。
returnPageInfo用来支持直接返回PageInfo类型，默认值none，可选参数always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page(List)类型。用法和配置参考com.github.pagehelper.test.basic包下的PageInfoTest，特别要注意接口的返回值和xml中的resultType类型。
重要提示：
当offsetAsPageNum=false的时候，由于PageNum问题，RowBounds查询的时候reasonable会强制为false。使用PageHelper.startPage方法不受影响。
另外使用RowBounds在这种情况下返回的Page对象由于没有正确的pageNum属性，所以也不能使用PageInfo处理。
如果你不理解为什么，可以看这样一个例子：查询offset=7,limit=10，这个时候pageNum=?，这种情况没法计算pageNum，没法判断当前是第几页。
3. 如何选择配置这些参数
单独看每个参数的说明可能是一件让人不爽的事情，这里列举一些可能会用到某些参数的情况。
首先dialect属性是必须的，不需要解释。其他的参数一般情况下我们都不必去管，如果想了解何时使用合适，你可以参考以下场景：
如果你仍然在用类似ibatis式的命名空间调用方式，你也许会用到rowBoundsWithCount，分页插件对RowBounds支持和Mybatis默认的方式是一致，默认情况下不会进行count查询，如果你想在分页查询时进行count查询，以及使用更强大的PageInfo类，你需要设置该参数为true。
如果你仍然在用类似ibatis式的命名空间调用方式，你觉得RowBounds中的两个参数offset,limit不如pageNum,pageSize容易理解，你可以使用offsetAsPageNum参数，将该参数设置为true后，offset会当成pageNum使用，limit和pageSize含义相同。
如果觉得某个地方使用分页后，你仍然想通过控制参数查询全部的结果，你可以配置pageSizeZero为true，配置后，如可以通过设置pageSize=0或者RowBounds.limit = 0就会查询出全部的结果。
如果你分页插件使用于类似分页查看列表式的数据，如新闻列表，软件列表，你希望用户输入的页数不在合法范围（第一页到最后一页之外）时能够正确的响应到正确的结果页面，那么你可以配置reasonable为true，这时如果pageNum&1会查询第一页，如果pageNum&总页数会查询最后一页。
4. Spring配置方法
首先需要在Spring中配置org.mybatis.spring.SqlSessionFactoryBean。然后配置配置Mybatis的具体配置有两种方式，一种是用mybatis默认的xml配置，另一种就是完全使用spring的属性配置方式。
1.mybatis默认的xml配置
配置configLocation属性指向上面的mybatis-config.xml文件。有关分页插件的配置都在mybatis-config.xml，具体配置内容参考上面的mybatis-config.xml。
2.使用spring的属性配置方式
注意：请不用同时使用spring配置方式和mybatis-config.xml配置方式，只需要选择其中一个就行。配置多个分页插件时，会抛出异常提示。
分页插件配置错误:请不要在系统中配置多个分页插件(使用Spring时,mybatis-config.xml和Spring配置方式，请选择其中一种，不要同时配置多个分页插件)！
使用spring的属性配置方式，可以使用plugins属性像下面这样配置：
&bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"&
&property name="dataSource" ref="dataSource"/&
&property name="mapperLocations"&
&value&classpath:mapper/*.xml&/value&
&/property&
&property name="typeAliasesPackage" value="com.isea533.ssm.model"/&
&property name="plugins"&
&bean class="com.github.pagehelper.PageHelper"&
&property name="properties"&
dialect=hsqldb
&/property&
&/property&
属性配置按照上面的方式配置，每个配置独立一行即可。
5. 如何在代码中使用
阅读前后请注意看
首先该分页插件支持以下两种调用方式：
//第一种，RowBounds方式的调用
List&Country& list = sqlSession.selectList("x.y.selectIf", null, new RowBounds(1, 10));
//第二种，Mapper接口方式的调用，推荐这种使用方式。
PageHelper.startPage(1, 10);
List&Country& list = countryMapper.selectIf(1);
下面分别对这两种方式进行详细介绍
1). RowBounds方式的调用
List&Country& list = sqlSession.selectList("x.y.selectIf", null, new RowBounds(1, 10));
使用这种调用方式时，你可以使用RowBounds参数进行分页，这种方式侵入性最小，我们可以看到，通过RowBounds方式调用只是使用了这个参数，并没有增加其他任何内容。
分页插件检测到使用了RowBounds参数时，就会对该查询进行物理分页。
关于这种方式的调用，有两个特殊的参数是针对RowBounds的，你可以参看上面的和
注：不只有命名空间方式可以用RowBounds，使用接口的时候也可以增加RowBounds参数，例如：
//这种情况下也会进行物理分页查询
List&Country& selectAll(RowBounds rowBounds);
2). PageHelper.startPage静态方法调用
在你需要进行分页的Mybatis方法前调用PageHelper.startPage静态方法即可，紧跟在这个方法后的第一个Mybatis查询方法会被进行分页。
SqlSession sqlSession = MybatisHelper.getSqlSession();
CountryMapper countryMapper = sqlSession.getMapper(CountryMapper.class);
//获取第1页，10条内容，默认查询总数count
PageHelper.startPage(1, 10);
//紧跟着的第一个select方法会被分页
List&Country& list = countryMapper.selectIf(1);
assertEquals(2, list.get(0).getId());
assertEquals(10, list.size());
//分页时，实际返回的结果list类型是Page&E&，如果想取出分页信息，需要强制转换为Page&E&，
//或者使用PageInfo类（下面的例子有介绍）
assertEquals(182, ((Page) list).getTotal());
} finally {
sqlSession.close();
SqlSession sqlSession = MybatisHelper.getSqlSession();
CountryMapper countryMapper = sqlSession.getMapper(CountryMapper.class);
//获取第1页，10条内容，默认查询总数count
PageHelper.startPage(1, 10);
//紧跟着的第一个select方法会被分页
List&Country& list = countryMapper.selectIf(1);
//后面的不会被分页，除非再次调用PageHelper.startPage
List&Country& list2 = countryMapper.selectIf(null);
assertEquals(2, list.get(0).getId());
assertEquals(10, list.size());
//分页时，实际返回的结果list类型是Page&E&，如果想取出分页信息，需要强制转换为Page&E&，
//或者使用PageInfo类（下面的例子有介绍）
assertEquals(182, ((Page) list).getTotal());
assertEquals(1, list2.get(0).getId());
assertEquals(182, list2.size());
} finally {
sqlSession.close();
例三，使用PageInfo的用法：
//获取第1页，10条内容，默认查询总数count
PageHelper.startPage(1, 10);
List&Country& list = countryMapper.selectAll();
//用PageInfo对结果进行包装
PageInfo page = new PageInfo(list);
//测试PageInfo全部属性
//PageInfo包含了非常全面的分页属性
assertEquals(1, page.getPageNum());
assertEquals(10, page.getPageSize());
assertEquals(1, page.getStartRow());
assertEquals(10, page.getEndRow());
assertEquals(183, page.getTotal());
assertEquals(19, page.getPages());
assertEquals(1, page.getFirstPage());
assertEquals(8, page.getLastPage());
assertEquals(true, page.isFirstPage());
assertEquals(false, page.isLastPage());
assertEquals(false, page.isHasPreviousPage());
assertEquals(true, page.isHasNextPage());
本项目中包含大量测试，您可以通过查看测试代码了解使用方法。
测试代码地址：
MyBatis和Spring集成示例
如果和Spring集成不熟悉，可以参考下面两个
只有基础的配置信息，没有任何现成的功能，作为新手入门搭建框架的基础
这两个集成框架集成了MyBatis分页插件和MyBatis通用Mapper。
阅读(711)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'分页插件使用方法',
blogAbstract:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}