jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
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="Stylesheet" href="/js/jquery.autocomplete.css" />
首先是一个最简单的Autocomplete(自动完成)代码片段:
2 < head runat ="server" >
3 < title > AutoComplate </ title >
4 < script type ="text/javascript" src ="/js/jquery-1.4.2.min.js" ></ script >
5 < script type ="text/javascript" src ="/js/jquery.autocomplete.min.js" ></ script >
6 < link rel ="Stylesheet" href ="/js/jquery.autocomplete.css" />
7 < script type ="text/javascript" >
8 $( function () {
9 var data = " Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities " .split( " " );
10
11 $( ' #keyword ' ).autocomplete(data).result( function (event, data, formatted) {
12 alert(data);
13 });
14 });
15 </ script >
16 </ head >
17 < body >
18 < form id ="form1" runat ="server" >
19 < div >
20 < input id ="keyword" />
21 < input id ="getValue" value ="GetValue" type ="button" />
22 </ div >
23 </ form >
24 </ body >
25 </ html >
result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。
一个稍微复杂的例子,可以自定义提示列表:
2 < head runat ="server" >
3 < title > 自定义提示 </ title >
4 < script type ="text/javascript" src ="/js/jquery-1.4.2.min.js" ></ script >
5 < script type ="text/javascript" src ="/js/jquery.autocomplete.min.js" ></ script >
6 < link rel ="Stylesheet" href ="/js/jquery.autocomplete.css" />
7 < script type ="text/javascript" >
8 var emails = [
9 { name: " Peter Pan " , to: " peter@pan.de " },
10 { name: " Molly " , to: " molly@yahoo.com " },
11 { name: " Forneria Marconi " , to: " live@japan.jp " },
12 { name: " Master <em>Sync</em> " , to: " 205bw@samsung.com " },
13 { name: " Dr. <strong>Tech</strong> de Log " , to: " g15@logitech.com " },
14 { name: " Don Corleone " , to: " don@vegas.com " },
15 { name: " Mc Chick " , to: " info@donalds.org " },
16 { name: " Donnie Darko " , to: " dd@timeshift.info " },
17 { name: " Quake The Net " , to: " webmaster@quakenet.org " },
18 { name: " Dr. Write " , to: " write@writable.com " },
19 { name: " GG Bond " , to: " Bond@qq.com " },
20 { name: " Zhuzhu Xia " , to: " zhuzhu@qq.com " }
21 ];
22
23 $( function () {
24 $( ' #keyword ' ).autocomplete(emails, {
25 max: 12 , // 列表里的条目数
26 minChars: 0 , // 自动完成激活之前填入的最小字符
27 width: 400 , // 提示的宽度,溢出隐藏
28 scrollHeight: 300 , // 提示的高度,溢出显示滚动条
29 matchContains: true , // 包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
30 autoFill: false , // 自动填充
31 formatItem: function (row, i, max) {
32 return i + ' / ' + max + ' :" ' + row.name + ' "[ ' + row.to + ' ] ' ;
33 },
34 formatMatch: function (row, i, max) {
35 return row.name + row.to;
36 },
37 formatResult: function (row) {
38 return row.to;
39 }
40 }).result( function (event, row, formatted) {
41 alert(row.to);
42 });
43 });
44 </ script >
45 </ head >
46 < body >
47 < form id ="form1" runat ="server" >
48 < div >
49 < input id ="keyword" />
50 < input id ="getValue" value ="GetValue" type ="button" />
51 </ div >
52 </ form >
53 </ body >
54 </ html >
formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。
formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,
formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。
autocomplete("data.ashx");
=============
第一个参数改为URL。autocomplete会自动发送请求如:data.ashx?q=123&limit=10×pan=2324242。q为查询参数,limit为显示或查询的最多项。
地址1: http://docs.jquery.com/Plugins/Autocomplete
地址2: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
代码:
$("#txtAllKey").autocomplete("user.ashx", {
minChars: 1,
width: 250,
max: 50,
matchContains: true,
autoFill: false,
extraParams: { method:"methodname",rnt:Math.random()
},
parse: function(data) {
return $.map(eval(data), function(row) {
return {
data: row,
value: row.NameCn + row.NameEn + row.PinYin,
result: row.NameCn
}
});
},
formatItem: function(row, i, max) {
return row.NameCn + row.NameEn ;
},
formatMatch: function(row, i, max) {
return row.NameCn + row.NameEn + row.PinYin;
},
formatResult: function(row) {
return row.NameCn;
}
}).result(function(event, jsonCity, formatted) {alert(row.NameCn);
});
jquery autocomplete的返回数据问题
多列输出:下面这种可以显示正常,达到2列输出,选中了一行后,可以把值填到textbox中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var
emails = [
{ name:
"Peter Pan"
, to:
"peter@pan.de"
},
{ name:
"Molly"
, to:
"molly@yahoo.com"
},
{ name:
"Forneria Marconi"
, to:
"live@japan.jp"
},
{ name:
"Master <em>Sync</em>"
, to:
"205bw@samsung.com"
},
{ name:
"Dr. <strong>Tech</strong> de Log"
, to:
"g15@logitech.com"
},
{ name:
"Don Corleone"
, to:
"don@vegas.com"
},
{ name:
"Mc Chick"
, to:
"info@donalds.org"
},
{ name:
"Donnie Darko"
, to:
"dd@timeshift.info"
},
{ name:
"Quake The Net"
, to:
"webmaster@quakenet.org"
},
{ name:
"Dr. Write"
, to:
"write@writable.com"
}
];
$(
"#autocomplete"
).autocomplete(emails, {
minChars: 0,
max:15,
width: 200,
scroll:
false
,
scrollHeight: 500,
formatItem:
function
(data, i, total) {
return
"<div style='float:left'>"
+data.name+data.to+
"</div>"
},
formatMatch:
function
(data, i, total) {
return
data.name;
},
formatResult:
function
(data, value) {
return
data.name;
}
}).result(
function
(event, data, formatted) {
$(
"#twoColum_abbr"
).val(data.to);
});
|
但是换成aspx输出的时候就不行了:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(
"#autocomplete"
).autocomplete(
"data.aspx"
, {
minChars: 0,
max:15,
width: 200,
scroll:
false
,
scrollHeight: 500,
formatItem:
function
(data, i, total) {
return
"<div style='float:left'>"
+data.name+data.to+
"</div>"
},
formatMatch:
function
(data, i, total) {
return
data.name;
},
formatResult:
function
(data, value) {
return
data.name;
}
}).result(
function
(event, data, formatted) {
$(
"#twoColum_abbr"
).val(data.to);
});
|
data.aspx的 Codebehind:该aspx输出到页面上的时候数据格式和emails 的数据格式是一样的,但是用这个作为数据源的时候
却总是全部输出。
问题所在 :我的问题基本和这位兄弟是一样的:http://www.javaeye.com/problems/17478
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!IsPostBack)
{
Response.Clear();
Response.Charset =
"utf-8"
;
Response.Buffer =
true
;
this
.EnableViewState =
false
;
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.ContentType =
"text/plain"
;
Response.Write(GetLikeUserName());
Response.Flush();
Response.Close();
Response.End();
}
}
private
string
GetLikeUserName()
{
string
[] str ={
"January"
,
"Ceshi"
,
"jQuery"
,
"josn"
,
"February"
,
"March"
,
"April"
,
"May"
,
"June"
,
"July"
,
"August"
,
"September"
,
"October"
,
"November"
,
"December"
};
StringBuilder sbstr =
new
StringBuilder();
sbstr.Append(
"["
);
for
(
int
i = 0; i < str.Length; i++)
{
if
(i == str.Length - 1)
{
sbstr.Append(
"{name:'"
+ str[i] +
"',to:'最后中文测试"
+ i +
"'}"
);
}
else
{
sbstr.Append(
"{name:'"
+ str[i] +
"',to:'中文测试"
+ i + Request.QueryString[
"q"
] +
"'},"
);
}
}
sbstr.Append(
"]"
);
return
sbstr.ToString();
}
|
顶的都有分,解决问题的重分酬谢,不够的话我加。谢谢了!比较急。
data.aspx没做过滤.
When a user starts typing in the input box, the autocompleter will request autocomplete_ajax.cfm with a GET parameter named q that contains the current value of the input box. Let's assume that the user has typed "sp" (without quotes). Autocomplete will then request autocomplete_ajax.cfm?q=sp.
意思是,当用户有输入的时候,autocomplete就会做一个这样的事情.
将第一个参数用GET的方式获取数据.而且将用户输入作为参数传递.
所以你的ASPX中要用request.getParameter("p")来做条件过滤.
可能我讲的不是很清楚,我试指返回数据为什么不是跟emials的数据格式一样,emials是json的数据格式可以用的,但是我的
aspx返回的也是这样的格式,可它不认,为什么?
你看返回的数据全放再一个行里面了:
[{name:'January',to:'中文测试0z'},{name:'Ceshi',to:'中文测试1z'},{name:'jQuery',to:'中文测试2z'},{name:'josn',to:'中文测试3z'},{name:'February',to:'中文测试4z'},{name:'March',to:'中文测试5z'},{name:'April',to:'中文测试6z'},{name:'May',to:'中文测试7z'},{name:'June',to:'中文测试8z'},{name:'July',to:'中文测试9z'},{name:'August',to:'中文测试10z'},{name:'September',to:'中文测试11z'},{name:'October',to:'中文测试12z'},{name:'November',to:'中文测试13z'},{name:'December',to:'最后中文测试14'}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
$(
"#autocomplete"
).autocomplete(
"data.aspx"
, {
minChars: 0,
max:15,
width: 200,
scroll:
false
,
scrollHeight: 500,
//需要把data转换成json数据格式
parse:
function
(data) {
return
$.map(eval(data),
function
(row) {
return
{
data: row,
value: row.name,
result: row.name +
" <"
+ row.to +
">"
}
});
},
formatItem:
function
(data, i, total) {
return
"<div style='float:left'>"
+data.name+data.to+
"</div>"
},
formatMatch:
function
(data, i, total) {
return
data.name;
},
formatResult:
function
(data, value) {
return
data.name;
}
}).result(
function
(event, data, formatted) {
$(
"#twoColum_abbr"
).val(data.to);
});
|
可以了,呵呵 谢谢!