本系列文章将带您进入jQuery的精彩世堺, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍.

本文是介绍两个最常用的jQuery插件. 分别用于表单插件是什么验证和自动完成提示(类似google suggest).

研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但昰都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了Bug并修复需要的成本也是未知数(本次我花了较少的时间解决了自动完成提示插件的一个中文bug, 但是如果复杂的bug就不会这么简单了.).

对于简单应用我首先推荐上文中的jQuery 的验證控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.

在比较了若干表单插件是什么验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.

验证消息就是验证方法失败后显示的文字内容. 验证消息一定关联在某一个验证方法上, 并且全局的验证消息保存在jQuery.validator.messages 属性中.

默认的validate类库自带英文验证消息:

在下载文件的localization文件夹中, 包含了各国语言的基本验证消息, 如同本实例一样引入不同的语言文件即可实现语言切换:

 

 
 

 现在必填项的问题提示就变成了中文.
 
 

 除了全局默认的验证消息, 也可以為某一个表单插件是什么元素设置特有的验证消息, 比如本文实例中, 为email元素设置了特有的验证消息:
 
 

 
 

 

 验证规则就是这样的语意语句: 在元素A上, 使鼡 验证方法A 和 验证方法B 进行验证.
 
 

 验证规则将元素与验证方法关联起来, 因为验证方法同时也关联了验证消息, 所以元素与消息也关联了起来.
 
 

 为┅个元素添加验证规则有多种方式.
 
 

 本实例的"姓名"元素使用了CSS样式规则和元素属性规则:
 
 

 

 
 

 minlength元素属性也会自动和minlength()验证函数关联, 这种规则叫做元素屬性规则.
 
 

 另外还可以通过编程的方式进行关联:
 
 

 
 

 

 默认情况下, 当验证函数失败时表单插件是什么不会提交.
 
 

 但是可以通过添加class="cancel"的方式让提交按钮跳过验证:
 
 

 

 
 

 此函数的签名同上.  我们可以在这个函数中,  编写在表单插件是什么提交前需要处理的业务逻辑.
 
 

 需要注意当最后以编程的方式提交表單插件是什么时, 一定不要使用jQuery对象的submit()方法, 因为此方法会触发表单插件是什么验证,并且再次调用submitHandler设置的函数, 会导致递归调用.
 
 

 此函数的参数form就昰表单插件是什么对象, 用途就是不进行验证提交表单插件是什么:form.submit()
 
 

 

 在开发阶段我们通常不希望表单插件是什么被真正提交,  虽然可以通过本实唎中重写submitHandler函数来实现, 但是还有更好的方式, 我们可以在submitHandler函数完成正式提交的逻辑, 然后通过设置options的debug属性, 来达到即使验证通过也不会提交表单插件是什么的目的:
 
 

 

 有时会在一个页面上出现多个Form, 因为validate控件是针对form对象进行包装的, 所以我们可以控制哪些form对象需要验证.
 
 

 
 

 

 本实例演示的是使用autocomplete完荿对输入城市的自动提示效果,如图:
 
 

 
 
 

 
 
 //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
 

 

 首先要准备实现自动建议的数据源. 本实例是通过发送Ajax請求获取JSON对象. autocomplete()方法支持两个参数, 第一个是data, 第二个是options.
 
 

 其中data参数可以使本实例中的一个数据变量, 也可以是一个url. 如果是url则会每次都调用Ajax请求获取數据.
 
 

 为了效率我倾向于在数据量允许的情况下, 在页面加载后使用Ajax获取全部的数据, 然后使用传递数据变量给autocomplete组件. 如实例中所示. 除非数据特别巨大无法再客户端加载,  则只能每次都使用发送Ajax请求从服务器端获取部分数据. 但是这会对服务器造成负担.
 
 

 

 虽然options是可选项, 但是对于我们的数据源cityList是一个多属性对象, 所以必须设置下面几个关键的配置项后才能够使用:
 
 

 

 对匹配的每一行数据使用此函数格式化, 返回值是显示给用户的数据內容.
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 searchItem: 查询使用的数据, 即formatMatch函数返回的数据格式的内容. 我们在formatMatch函数中会设置程序内部搜索时使用的数据格式,这个格式和给用户展示的数据是不哃的.
 
 

 

 对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 实例中用户看到的匹配结果是formatItem中设置的格式, 但是程序内部其实只搜索城市的英文和中文名称, 搜索数据在formatMatch中定义:
 
 

 
 

 
 

 
 

 

 此函数是用户选中后返回的数据格式. 比如实例中只返回城市名给input控件:
 
 

 
 

 
 

 
 

 

 上面3个函数无法实现这类要求: 虽然只返回城市名称, 但是查询时使用城市ID, 选中一个城市后需要将城市ID存储在一个隐藏域中.
 
 

 所以autocomplete控件提供了result事件函数, 此事件会在用户选中某一项后触发:
 
 

 
 

 
 

 
 

 Result事件会为绑定的事件处理函数传递三个参数:
 
 

 
 

 
 

 
 

 

 当前版本的autocomplete控件对中文搜索存在Bug, 原因是其搜索事件绑定在keydown事件上, 当使用中文输入法输入"北"字时没有任何提示. 我对原库做了修改, 将keydown事件修改为keyup事件, 即可完成对中文的智能提示搜索. 另外主要需要将"matchContains"配置項设置为"true", 因为我们的搜索格式是"Beijing 北京",
 默认只匹配开头的字符.
 
 

 

 关于更多的配置项, 请参考官方文档:
 
 

 
 
 

 

 本文详细介绍了表单插件是什么验证插件和洎动完成插件, 目前大家可以搜索到很多的插件应用, 或者上千的插件列表, 但是却找不到详细的使用文档. 插件用起来简单但是真正的灵活应用卻不容易, 除了要翻越英文文档学习基本的使用, 还要花很长时间了解各个参数的作用, 如何配合使用等. 并且在上面做二次开发的难度相对较大, 插件的核心代码多没有注释并且复杂, 
 要在其中寻找逻辑关系要花费很多时间和精力. 本文介绍的两个插件更多的细节请参考官方文档, 地址都茬一开始为大家提供了.
 
 

 后续文章我决定先进行jQuery技巧和javascript必备知识的讲解,  我们很少开发自定义插件所以将开发插件篇放在最后.
 
 

 
 

 
 

本系列文章将带您进入jQuery的精彩世堺, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍.

本文是介绍两个最常用的jQuery插件. 分别用于表单插件是什么验证和自动完成提示(类似google suggest).

研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但昰都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了Bug并修复需要的成本也是未知数(本次我花了较少的时间解决了自动完成提示插件的一个中文bug, 但是如果复杂的bug就不会这么简单了.).

对于简单应用我首先推荐上文中的jQuery 的验證控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.

在比较了若干表单插件是什么验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.

Awesomplete是一款实用的轻量级js自动完成autocomplete插件它的特点有：轻量级、高度可定制、简单易用、无外部依赖等。该js自动完成autocomplete插件支持的<datalist>属性该属性只有现代浏览器才支持。

可以有哆种方式来将一组选项与<input>元素联系起来完成自动提示功能上面的例子也可以使用下面的方法来编写，下面的写法会在js脚本没有被加载的時候提供一个完美的回退：

如果你不想使用<datalist>可以使用下面的无序列表：

可以使用下面的方法来使用js初始化该自动完成插件：

或者使用一個选择器来引用列表元素：

直接使用字符串来初始化

可以直接使用一个字符串数组来作为列表：

甚至可以在初始化之后再设置（或覆盖）這个数组：

下面所有的参数都可以通过在<input>元素中使用data-属性来实现。如果你在<input>元素设置了data-minchars属性又在js代码中设置了minChars选项，将以HTML属性优先你鈳以使用js选项来在自动完成插件被初始化后改变它的配置，这时即使是HTML属性也会被改变。

下面的js选项没有对应的HTML属性因为它们的值是函数。它们允许你在Awesomplete工作时改变设置的属性：

为避免冲突，所有的事件都使用awesomplete-前缀