求助Jquery Autocomplete 如何动态加载数据，类似百度的搜索提示
1个回答
2016-04-25 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
自己解决了，前台代码：
1 <link href="AutoLib/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
2 <script src="lib/jquery-1.4.1.min.js" type="text/javascript"></script>
3 <script src="AutoLib/jquery.autocomplete.min.js" type="text/javascript"></script>
4 <script type="text/javascript" src="lib/localdata.js"></script>
5
6 <script type="text/javascript">
7 $().ready(function () {
8 //静态填充
9 $("#TxtJsion").focus().autocomplete(emails, {
10 minChars: 0,
11 width: 310,
12 max: 0,
13 matchContains: true,
14 autoFill: false,
15 formatItem: function (row, i, max) {
16 //显示的值
17 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
18 },
19 formatMatch: function (row, i, max) {
20 //查找匹配的值
21 return row.name + " " + row.to;
22 },
23 formatResult: function (row) {
24 //选中后的值
25 return row.to;
26 }
27 });
28
29 });//初始化结束
30
31 //动态填充
32 function AutoFillKey() {
33 var keyWords = $("#<%=TxtAuto.ClientID%>").val();
34
35 //改变绑定的内容
36 if (keyWords.length == 1 && keyWords != $("#TxtKey").val()) {
37 $("#TxtKey").val(keyWords);
38 $("#TxtAuto").unautocomplete();
39
40 $.ajax({
41 type: "POST",
42 url: "ServerData.ashx",
43 data: { "KW": keyWords },
44 dataType: "json",
45 timeout: 2000,
46 error: function (data) {
47 alert("请求失败：" + data.responseText);
48 },
49 success: function (data) {
50 AutoCompleteKey(data);
51 }
52 });
53
54 } //end if
55 }
56
57 function AutoCompleteKey(data) {
58 //填充开始
59 $("#<%=TxtAuto.ClientID%>").autocomplete(data, {
60 minChars: 0,
61 width: 640,
62 autoFill: false,
63 matchContains: true,
64 selectFirst: false,
65 scrollHeight: 220,
66
67 scroll: true,
68 formatItem: function (row, i, max) {
69 //显示的值
70 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
71 },
72 formatMatch: function (row, i, max) {
73 //查找匹配的值
74 return row.name + " " + row.to;
75 },
76 formatResult: function (row) {
77 //选中后的值
78 return row.to;
79 }
80 });
81 //填充结束
82 }
83
84 </script>
85 </head>
86 <body>
87 <form id="form1" runat="server" method="post">
88 <div>
89 <p>静态填充<input type="text" id="TxtJsion" /></p>
90
91 <p>动态填充
92 <input type="text" id="TxtAuto" onkeyup="AutoFillKey();" runat="server" />
93 <input type="hidden" id="TxtKey" value="" runat="server" />
94 </p>
95 </div>
96 </form>
97 </body>
98 </html>
后台代码：
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Script.Serialization;
6 using System.Text;
7 using System.Web.Services;
8
9 namespace AutocompleteWeb
10 {
11 /// <summary>
12 /// ServerData 的摘要说明
13 /// </summary>
14 [WebService(Namespace = ]
15 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
16 public class ServerData : IHttpHandler
17 {
18
19 public void ProcessRequest(HttpContext context)
20 {
21 //GET方式
22 //context.Response.ContentType = "text/plain";
23 //string keyword = context.Request.QueryString["KW"];
24 //if (keyword != null)
25 //{
26 // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
27 //JavaScriptSerializer serializer = new JavaScriptSerializer();
28 //string jsonString = serializer.Serialize(GetProvinceCitys(keyword));
29 //context.Response.Write(jsonString); // 返回客户端json格式数据
30 //}
31
32 //POST方式
33 context.Response.ContentType = "application/json";
34 string keyStr = "";
35 if (context.Request["KW"] != null)
36 {
37 keyStr = context.Request["KW"].ToString();
38 }
39 ResponseJsionStr(context, GetProvinceCitys(keyStr));
40 }
41
42
43 /// <summary>
44 /// qinjue 2011-09-21
45 /// 返回jsion
46 /// </summary>
47 private void ResponseJsionStr(HttpContext context, string strJsion)
48 {
49 context.Response.Clear();
50 context.Response.ClearContent();
51 context.Response.Cache.SetNoStore();
52 context.Response.ContentType = "application/json";
53 context.Response.ContentEncoding = System.Text.Encoding.UTF8;
54 context.Response.Write(strJsion);
55 context.Response.End();
56 }
57
58 public string GetProvinceCitys(string KW)
59 {
60 StringBuilder cytySB = new StringBuilder();
61 cytySB.Append("[");
62 cytySB.Append("{\"name\":\"AACCASF东城区\",\"to\":\"11001\"},");
63 cytySB.Append("{\"name\":\"AACSAWE西城区\",\"to\":\"11002\"},");
64 cytySB.Append("{\"name\":\"AACAER海淀区\",\"to\":\"11003\"}");
65 cytySB.Append("]");
66 return cytySB.ToString();
67 }
68
69 public bool IsReusable
70 {
71 get
72 {
73 return false;
74 }
75 }
76 }
77 }
1 <link href="AutoLib/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
2 <script src="lib/jquery-1.4.1.min.js" type="text/javascript"></script>
3 <script src="AutoLib/jquery.autocomplete.min.js" type="text/javascript"></script>
4 <script type="text/javascript" src="lib/localdata.js"></script>
5
6 <script type="text/javascript">
7 $().ready(function () {
8 //静态填充
9 $("#TxtJsion").focus().autocomplete(emails, {
10 minChars: 0,
11 width: 310,
12 max: 0,
13 matchContains: true,
14 autoFill: false,
15 formatItem: function (row, i, max) {
16 //显示的值
17 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
18 },
19 formatMatch: function (row, i, max) {
20 //查找匹配的值
21 return row.name + " " + row.to;
22 },
23 formatResult: function (row) {
24 //选中后的值
25 return row.to;
26 }
27 });
28
29 });//初始化结束
30
31 //动态填充
32 function AutoFillKey() {
33 var keyWords = $("#<%=TxtAuto.ClientID%>").val();
34
35 //改变绑定的内容
36 if (keyWords.length == 1 && keyWords != $("#TxtKey").val()) {
37 $("#TxtKey").val(keyWords);
38 $("#TxtAuto").unautocomplete();
39
40 $.ajax({
41 type: "POST",
42 url: "ServerData.ashx",
43 data: { "KW": keyWords },
44 dataType: "json",
45 timeout: 2000,
46 error: function (data) {
47 alert("请求失败：" + data.responseText);
48 },
49 success: function (data) {
50 AutoCompleteKey(data);
51 }
52 });
53
54 } //end if
55 }
56
57 function AutoCompleteKey(data) {
58 //填充开始
59 $("#<%=TxtAuto.ClientID%>").autocomplete(data, {
60 minChars: 0,
61 width: 640,
62 autoFill: false,
63 matchContains: true,
64 selectFirst: false,
65 scrollHeight: 220,
66
67 scroll: true,
68 formatItem: function (row, i, max) {
69 //显示的值
70 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
71 },
72 formatMatch: function (row, i, max) {
73 //查找匹配的值
74 return row.name + " " + row.to;
75 },
76 formatResult: function (row) {
77 //选中后的值
78 return row.to;
79 }
80 });
81 //填充结束
82 }
83
84 </script>
85 </head>
86 <body>
87 <form id="form1" runat="server" method="post">
88 <div>
89 <p>静态填充<input type="text" id="TxtJsion" /></p>
90
91 <p>动态填充
92 <input type="text" id="TxtAuto" onkeyup="AutoFillKey();" runat="server" />
93 <input type="hidden" id="TxtKey" value="" runat="server" />
94 </p>
95 </div>
96 </form>
97 </body>
98 </html>
后台代码：
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Script.Serialization;
6 using System.Text;
7 using System.Web.Services;
8
9 namespace AutocompleteWeb
10 {
11 /// <summary>
12 /// ServerData 的摘要说明
13 /// </summary>
14 [WebService(Namespace = ]
15 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
16 public class ServerData : IHttpHandler
17 {
18
19 public void ProcessRequest(HttpContext context)
20 {
21 //GET方式
22 //context.Response.ContentType = "text/plain";
23 //string keyword = context.Request.QueryString["KW"];
24 //if (keyword != null)
25 //{
26 // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
27 //JavaScriptSerializer serializer = new JavaScriptSerializer();
28 //string jsonString = serializer.Serialize(GetProvinceCitys(keyword));
29 //context.Response.Write(jsonString); // 返回客户端json格式数据
30 //}
31
32 //POST方式
33 context.Response.ContentType = "application/json";
34 string keyStr = "";
35 if (context.Request["KW"] != null)
36 {
37 keyStr = context.Request["KW"].ToString();
38 }
39 ResponseJsionStr(context, GetProvinceCitys(keyStr));
40 }
41
42
43 /// <summary>
44 /// qinjue 2011-09-21
45 /// 返回jsion
46 /// </summary>
47 private void ResponseJsionStr(HttpContext context, string strJsion)
48 {
49 context.Response.Clear();
50 context.Response.ClearContent();
51 context.Response.Cache.SetNoStore();
52 context.Response.ContentType = "application/json";
53 context.Response.ContentEncoding = System.Text.Encoding.UTF8;
54 context.Response.Write(strJsion);
55 context.Response.End();
56 }
57
58 public string GetProvinceCitys(string KW)
59 {
60 StringBuilder cytySB = new StringBuilder();
61 cytySB.Append("[");
62 cytySB.Append("{\"name\":\"AACCASF东城区\",\"to\":\"11001\"},");
63 cytySB.Append("{\"name\":\"AACSAWE西城区\",\"to\":\"11002\"},");
64 cytySB.Append("{\"name\":\"AACAER海淀区\",\"to\":\"11003\"}");
65 cytySB.Append("]");
66 return cytySB.ToString();
67 }
68
69 public bool IsReusable
70 {
71 get
72 {
73 return false;
74 }
75 }
76 }
77 }
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
