jQuery插件autocomplete使用详解

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

autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）。

淘宝商品搜索功能 效果：

下面来使用 autocomplete插件来实现类似效果。

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

using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Web.Services;

 public partial class AjaxPage : System.Web.UI.Page
 {
  [WebMethod]
  public static string GetAllHints()
  {
   Dictionary<string, string> data = new Dictionary<string, string>();
   data.Add("苹果4代iphone正品", "21782");
   data.Add("苹果4代 手机套", "238061");
   data.Add("苹果4", "838360");
   data.Add("苹果皮", "242721");
   data.Add("苹果笔记本", "63348");
   data.Add("苹果4s", "24030");
   data.Add("戴尔笔记本", "110105");
   data.Add("戴尔手机", "18870");
   data.Add("戴尔键盘", "30367");

   DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());

   using (MemoryStream ms = new MemoryStream())
   {
    serializer.WriteObject(ms, data);
    return System.Text.Encoding.UTF8.GetString(ms.ToArray());
   }
  }
 }

注：该方法返回的数据格式为json字符串。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
  <title></title>
 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
 <script type="text/javascript">
  var v = 1;
  $(document).ready(function () {
   $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "AjaxPage.aspx/GetAllHints",
    data: "{}",
    dataType: "json",
    success: function (msg) {
     var datas = eval('(' + msg.d + ')');
     $("#txtIput").autocomplete(datas, {
      formatItem: function (row, i, max) {
       return "<table width='400px'><tr><td align='left'>" + row.Key + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.Value + "个宝贝</font>  </td></tr></table>";
      },
      formatMatch: function(row, i, max){
       return row.Key;
      }
     });
    }
   });
  });
 </script>
 </head>
 <body>
  <form id="form1" runat="server">
  <div>
  <center>
   <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
  </center>
  </div>
  </form>
 </body>
</html>

实现效果如下：

3. autocomplete 参数说明

* minChars (Number)
    在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表

* width (Number)
    指定下拉框的宽度. Default: input元素的宽度

* max (Number)
    autoComplete下拉显示项目的个数.Default: 10

* delay (Number)
    击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

* autoFill (Boolean)
    要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false

* mustMatch (Booolean)
    如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false

* matchContains (Boolean)
    决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false

* selectFirst (Boolean)
    如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true

* cacheLength (Number)
    缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10

* matchSubset (Boolean)
    autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true

* matchCase (Boolean)
    比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false

* multiple (Boolean)
    是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false

* multipleSeparator (String)
    如果是多选时,用来分开各个选择的字符. Default: ","

* scroll (Boolean)
    当结果集大于默认高度时是否使用卷轴显示 Default: true

* scrollHeight (Number)
    自动完成提示的卷轴高度用像素大小表示 Default: 180

* formatItem (Function)
    为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

* formatResult (Function)
    和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

* formatMatch (Function)
    对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

* extraParams (Object)
    为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

* result (handler)
    此事件会在用户选中某一项后触发，参数为：
    event: 事件对象. event.type为result.
    data: 选中的数据行.
    formatted:formatResult函数返回的值
    例如：

 $("#singleBirdRemote").result(function(event, data, formatted) {
  //如选择后给其他控件赋值，触发别的事件等等
 });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery autocomplete自动完成插件的的使用方法

    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

  • jQuery UI Autocomplete 体验分享

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: 复制代码 代码如下: ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: 复制代码 代码如下: [{label: "博客园", value: "cnblogs"}, {label: &qu

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • Jquery AutoComplete自动完成 的使用方法实例

    jquery-autocomplete配置: <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> <link rel="

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

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

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • jQuery UI AutoComplete 自动完成使用小记

    jQuery UI AutoComplete 自动完成使用小记

    页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • jQuery UI AutoComplete 使用说明

    介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式. 首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库. jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,

  • jQuery.Autocomplete实现自动完成功能（详解）

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) m

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

  • jquery.AutoComplete.js中文修正版(支持firefox)

    复制代码 代码如下: jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (optio

随机推荐