jQuery插件自动完成使用详解

项目中有时会用到自动补全查询，就像谷歌搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择，自动完成插件就是完成这样的功能。

自动完成官网：http://bassistance。de/jquery-plugins/jquery-plugin-autocomplete/(可下载jQuery自动完成插件)。

淘宝商品搜索功能效果：

下面来使用自动完成插件来实现类似效果。

1.创建AjaxPage.aspx页面，在其中定义WebMethod方法来返回搜索页面需要的输入框所有提示条目。后台代码如下：

使用系统。集合。通用；使用系统IO；使用系统。运行时。序列化。Json使用系统。网络服务；公共部分类AjaxPage :系统网络。ui。page {[WebMethod]public static string GetAllHints(){ dictionary string，string data=new Dictionarystring，string()；数据。添加('苹果四代苹果手机正品', '21782');数据。添加('苹果四代手机套', '238061');数据。添加('苹果4', '838360');数据。添加('苹果皮', '242721');数据。添加('苹果笔记本', '63348');数据。添加('苹果4s '，' 24030 ')；数据。添加('戴尔笔记本', '110105');数据。添加('戴尔手机', '18870');数据。添加('戴尔键盘', '30367');DataContractJsonSerializer序列化程序=新的DataContractJsonSerializer(数据. GetType())；使用(内存流ms=新内存流()){ 0序列化程序WriteObject(毫秒，数据);返回系统文本。编码。utf8。getstring(ms . to array())；} } }注：该方法返回的数据格式为json字符串。

2.创建搜索页面Index.aspx，前台代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link rel='样式表href=' style/jquery。自动完成。CSS '/脚本类型=' text/JavaScript ' SRS$(文档)。ready(function () { $).ajax({ type: 'POST '、内容类型： ' application/JSON '、URL : ' AJaxpage。aspx/GetalLoints '、数据： ' } '、数据类型： 'json '、成功：函数(消息){ var datas=eval('('消息。d ')')))；$('#txtIput ').自动完成（数据，{ formatItem:函数(第I行，最大值){ return '表格宽度=' 400 px ' trtd align=' left '行.key '/tdtd align=' right ' font style=' color : # 009933；字体系列：黑体；字体样式：斜体'约划船。"价值"个宝贝/font/TD/tr/table '；}，formatMatch:函数（行，I，max){ 0返回行。密钥；} });} });});/脚本/头体表单ID=' form 1 ' runat=' server ' div center asp3360 textbox ID=' txtIput ' runat=' server ' Width=' 400 px '/asp: textbox/center/div/form/body/html实现效果如下：

3.自动完成参数说明

*最小字符数在触发自动完成前用户至少需要输入的字符数。默认值： 1，如果设为0,在输入框内双击或者删除输入框内内容时显示列表

*宽度（数字)指定下拉框的宽度。默认值：输入元素的宽度

*最大（数字)自动完成下拉显示项目的个数。默认值： 10

*延迟（数量)击键后激活自动完成的延迟时间（单位毫秒)。默认值：远程为400 本地10

*自动填充（布尔值)要不要在用户选择时自动将用户当前鼠标所在的值填入到投入框。默认值：为假

*必须匹配(booclean)如果设置为真，自动完成只会允许匹配的结果出现在输入框，所有当用户输入的是非法字符时将会得不到下拉框。默认值：为假

* matchContains(布尔值)确定在比较时是否在字符串中查找匹配项，例如ba是否与foo bar中的ba匹配。使用缓存很重要。不要将其与自动填充混合使用。默认值：为假

* selectFirst(布尔值)如果设置为true，当用户键入tab或return键时，自动完成下拉列表的第一个值将被自动选择，尽管它尚未被手动选择(使用键盘或鼠标)。当然，如果用户选择了一个项目，那么将使用用户选择的值default3360true。

*缓存长度(数字)缓存的长度。也就是说，应该为从数据库中检索的结果集缓存多少条记录。设置为1表示不缓存。默认值： 10

*匹配子集(布尔型)自动完成可以使用服务器查询的缓存。如果foo的查询结果被缓存，那么如果用户输入foo，就不需要检索它，直接使用缓存。通常，打开此选项是为了减轻服务器负担并提高性能。只有当缓存长度大于1时，它才有效。默认值：为真

* matchCase(布尔值)比较是否打开区分大小写的开关。使用缓存很重要。如果您理解前面的选项，这并不难理解，就像FOOt是否应该在foo的缓存中查找一样。Default: false。

* multiple(布尔值)是否允许输入多个值，即使用自动完成多次输入多个值。默认值：为假

*多重分隔符(字符串)如果进行了多重选择，用于分隔选择的字符为默认值： '，'

*滚动(布尔值)当结果集大于默认高度时，是否使用滚动条显示Default: true。

*滚动高度(数字)自动提示的滚动高度用像素大小表示。默认值： 180。

* formatItem(函数)为要显示的每个项目使用高级标记。将对结果中的每一行调用该函数，返回值将显示在带有LI元素的下拉列表中。自动完成器将提供由三个参数返回的结果数组(row，I，max):当前处理的行数(即哪一项，是从1开始的自然数)，当前结果数组中的元素数是项数。Default: none表示没有指定用户定义的处理函数，因此下拉列表中的每一行只包含一个值。

* formatResult(函数)类似于formatItem，但它可以格式化要输入到输入文本框中的值。还有三个参数，与formatItem相同。Default: none表示只有数据或formatItem提供的值。

* formatMatch(函数)使用此函数为每行数据格式化要查询的数据格式。返回值用于内部搜索算法。参数值是行

* extraParams(对象)为后台提供更多参数(通常是服务器脚本)。通常，使用键值对对象。如果传递的值是{bar:4}，它将由自动完成器解析为my _ autocomplete _后端. php？Q=foobar=4(假设当前用户已经输入了foo)。默认值： {}

* result (handler)此事件将在用户选择项目后触发。参数为：event:事件对象。event.type是结果。data:选定的数据线。格式化结果函数返回的格式化结果，例如：

$(' # single bird stream ')。结果(函数(事件、数据、格式化){//比如选择后给其他控件赋值，触发其他事件等。});以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。