正文
jquery搜索提示,jquery下拉框索引
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
求助Jquery Autocomplete 如何动态加载数据，类似百度的搜索提示
自己解决了，前台代码：
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 }
相关问答
Q1: jquery ajax 获取百度搜索提示
这是jsonp获取数据，将数据传递给了window.baidu.sug这个方法，所以，你自己创建这么一个函数，参数是个json对象，对数据如何操作，你就写在函数里面，（json如何用，百度）然后用eval或者其他的方式解析你得到的字符串，它就会自动调用你的函数。
Q2: jquery类似百度搜索框输入文字后显示提示问题？
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titlecheckbox/title
script src="js/jquery-1.3.2.js" type="text/javascript"/script
script src="js/1.js" type="text/javascript"/script
/head
body
table id="table1"
tr
tdinput type="checkbox" value="1"/1/td
td id="k_1"input type="text" name="student" id="s_1" readonly="true"//td
/tr
tr
tdinput type="checkbox" value="2"/2/td
td id="k_2"input type="text" name="student" id="s_2" readonly="true"//td
/tr
tr
tdinput type="checkbox" value="3"/3/td
td id="k_3"input type="text" name="student" id="s_3" readonly="true"//td
/tr
tr
tdinput type="checkbox" value="4"/4/td
td id="k_4"input type="text" name="student" id="s_4" readonly="true"//td
/tr
/table
/body
/html
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
check.each(function(i){
actor_config = $(this);
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show();
}else{
$("#k_"+$(this).val()).hide();
}
}
);
});
});
