在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
autocomplete官网 :
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
(可下载jQuery autocomplete插件)。
淘宝商品搜索功能 效果:
下面来使用 autocomplete插件来实现类似效果。
复制代码 代码如下:
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, 前台代码如下:
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %> <!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 > <div> <center> <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox> </center> </div> </form> </body> </html> 实现效果如下:
3. autocomplete 参数说明 * minChars (Number) |
请发表评论