jQuery插件自动完成自动完成应用（自动补全)(asp.net后台)

自动完成官网：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，前台代码如下：复制代码代码如下： %@页面语言=' c# ' AutoEventWireup=' true ' CodeFile=' index。aspx。cs ' Inherits=' _ Default ' %！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*延迟(数字)。击键后激活自动完成的延迟时间(毫秒)。远程和10*自动填充的默认值为400(布尔值)。当用户选择输入框时，是否要自动将用户当前鼠标的值填入输入框？default : false * must match(booclean)？如果设置为true，自动完成将只允许匹配结果出现在输入框中，当用户输入非法字符时，不会得到下拉框。default : false * match contains(布尔值)确定在比较期间是否查看字符串中的匹配项。如果ba与foo bar中的ba匹配，那么使用缓存非常重要。不要将其与自动填充混合使用。Default: false *选择第一个(布尔值)如果设置为true，当用户键入tab或return键时，将自动选择自动完成下拉列表中的第一个值。虽然还没有手动选择(使用键盘或鼠标)，当然，如果用户选择了一个项目，那么使用用户选择的值，default : true * cache length(number)，也就是从数据库中获取的结果集应该缓存多少条记录。将1设置为不缓存。默认值3360 10 * matchsubset(布尔值)。自动完成可以使用服务器查询的缓存。如果foo的查询结果被缓存，那么如果用户输入foo，就不需要检索它。直接使用缓存。通常，打开此选项是为了减轻服务器负担并提高性能。仅当缓存长度大于1时才有效。默认值： true * matchcase(布尔值)比较是否打开区分大小写的开关。使用缓存更重要。如果你理解前面的选项，这就不难理解了。例如，如果FoT想在foo的缓存中查找。default: false * multiple(布尔值)允许输入多个值，即多次使用autoComplete输入多个值。default: false *多个分隔符(字符串)如果选择了多个值，用于分隔选定的字符。Default: '，* scroll(布尔值)如果结果集大于默认高度，是否使用scroll显示default3360 true * scrollheight(数字)自动完成提示的滚动高度以像素大小表示。默认3360 180 * formatitem(函数)。对要显示的每个项目使用高级标签。也就是说，将为结果中的每一行调用该函数，返回值将显示在带有LI元素的下拉列表中。自动完成器将提供由三个参数(row，I，max):返回的结果数组，以及当前处理的行数(即哪一项是从1开始的自然数)。当前结果数组中的元素数是项目数。Default: none表示没有指定用户定义的处理函数，因此下拉列表中的每一行只包含一个值。* formatResult(函数)类似于formatItem，但输入到输入文本框中的值可以格式化。还有三个参数。与formatItem相同。默认值：无，这意味着要么只有数据，要么使用formatItem提供的值。* formatMatch(函数)使用此函数为每行数据格式化要查询的数据格式。返回值用于内部搜索算法。参数值行* extraParams (Object)是后台(通常是服务器的脚本)。提供更多参数。像往常一样，使用键值对对象。如果传递的值是{bar:4}，它将被自动完成器解析成my _ autocomplete _后端. php？Q=foobar=4(假设当前用户已经输入了foo)。default: {} * result(处理程序)此事件将在用户选择项目后触发。参数为：event:事件对象。event.type是结果。data:选定的数据线。format ed : formatResult值由format result函数返回，例如：$ ('# singlebirdremote ')。result (function (event，data，formated)){//如果在选择后给其他控件赋值，则触发其他事件等。});作者：彼得。