当前位置:编程学习 > JAVA >>

jQuery 插件autocomplete 应用  

 

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

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

  淘宝商品搜索功能 效果:

 

\

 

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

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

 1 using System.Collections.Generic;

 2 using System.IO;

 3 using System.Runtime.Serialization.Json;

 4 using System.Web.Services;

 5

 6 public partial class AjaxPage : System.Web.UI.Page

 7 {

 8     [WebMethod]

 9     public static string GetAllHints()

10     {

11         Dictionary<string, string> data = new Dictionary<string, string>();

12         data.Add("苹果4代iphone正品", "21782");

13         data.Add("苹果4代 手机套", "238061");

14         data.Add("苹果4", "838360");

15         data.Add("苹果皮", "242721");

16         data.Add("苹果笔记本", "63348");

17         data.Add("苹果4s", "24030");

18         data.Add("戴尔笔记本", "110105");

19         data.Add("戴尔手机", "18870");

20         data.Add("戴尔键盘", "30367");

21

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

23

24         using (MemoryStream ms = new MemoryStream())

25         {

26             serializer.WriteObject(ms, data);

27             return System.Text.Encoding.UTF8.GetString(ms.ToArray());

28         }

29     }

30 }

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

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

 1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Index.aspx.cs" Inherits="_Default" %>

 2

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

 4

 5 <html xmlns="http://www.w3.org/1999/xhtml">

 6 <head runat="server">

 7     <title></title>

 8 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />

 9 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

10 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>

11 <script type="text/javascript">

12     var v = 1;

13     $(document).ready(function () {

14         $.ajax({

15             type: "POST",

16             contentType: "application/json",

17             url: "AjaxPage.aspx/GetAllHints",

18             data: "{}",

19             dataType: "json",

20             success: function (msg) {

21                 var datas = eval('(' + msg.d + ')');

22                 $("#txtIput").autocomplete(datas, {

23                     formatItem: function (row, i, max) {

24                         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>";

25                     },

26                     formatMatch: function(row, i, max){

27                         return row.Key;

28                     }

29                 });

30             }

31         });

32     });

33 </script>

34 </head>

35 <body>

36     <form id="form1" runat="server">

37     <div>

38     <center>

39         <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>

40     </center>

41     </div>

42     </form>

43 </body>

44 </html>

  实现效果如下:

 

\

3. autocomplete 参数说明

* minChars (Number)

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

* width (Number)

    指定下拉框的宽度. Default: input元素的宽度

* max (Number)

    autoComplete下拉显示项目的个数.Default

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,