首页 新闻 赞助 找找看

jquery.autocomplete 自动完成的问题

0
悬赏园豆:10 [已解决问题] 解决于 2011-09-07 08:47
View Code
var emails =[{cityEnglish:"BEIJING",cityName:"北京",airportThreeZiMa:"PEK"},{cityEnglish:"BEIJING",cityName:"北京",airportThreeZiMa:"NAY"},{cityEnglish:"CHANGCHUN",cityName:"长春",airportThreeZiMa:"CGQ"},{cityEnglish:"CHANGSHA",cityName:"长沙",airportThreeZiMa:"CSX"},{cityEnglish:"CHENGDU",cityName:"成都",airportThreeZiMa:"CTU"},{cityEnglish:"CHONGQING",cityName:"重庆",airportThreeZiMa:"CKG"},{cityEnglish:"CHONGQING",cityName:"重庆",airportThreeZiMa:"WXN"},{cityEnglish:"GUANGZHOU",cityName:"广州",airportThreeZiMa:"CAN"},{cityEnglish:"HANGZHOU",cityName:"杭州",airportThreeZiMa:"HGH"},{cityEnglish:"KUNMING",cityName:"昆明",airportThreeZiMa:"KMG"},{cityEnglish:"SHANGHAI",cityName:"上海",airportThreeZiMa:"SHA"},{cityEnglish:"SHANGHAI",cityName:"上海",airportThreeZiMa:"PVG"},{cityEnglish:"SHENZHEN",cityName:"深圳",airportThreeZiMa:"SZX"},{cityEnglish:"ZHENGZHOU",cityName:"郑州",airportThreeZiMa:"CGO"}];
$(function() {
$(
'#txtSetOutCity').autocomplete(emails, {
max:
12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: false, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row) {
return row.cityEnglish + '"[' + row.cityName + ']';
},
formatMatch: function(row, i, max) {
return row.cityEnglish + row.cityName;
},
formatResult: function(row) {
return row.cityName;
}
}).result(function(
event, row, formatted) {
alert(row.cityName);
});
});

本人,直接在脚本中传入json格式数据,可以进行自动完成。可以通过,后台代码传入的json格式的数据。就不能自动完成。求:解 指点的代码如下:

 

View Code
$(function() {
$(
'#txtSetOutCity').autocomplete("Default2.aspx?do=one", {
max:
12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: false, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row) {
return row.cityEnglish + '"[' + row.cityName + ']';
},
formatMatch: function(row, i, max) {
return row.cityEnglish + row.cityName;
},
formatResult: function(row) {
return row.cityName;
}
}).result(function(
event, row, formatted) {
alert(row.cityName);
});
});

后台代码如下:

 

View Code
private DataTable dtInfo = null;
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["do"] == "one")
{
string cityName = txtSetOutCity.Text;
if (dtInfo == null)
{
dtInfo
= ssc.SelectSetOutCtiy("", "");

}

Response.Clear();
Response.Write(DataTableToJson(dtInfo));
Response.Flush();
Response.End();
}

}


private string DataTableToJson(DataTable dt)
{
StringBuilder jsonBuilder
= new StringBuilder();
jsonBuilder.Append(
"[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append(
"{"); for (int j = 0; j < dt.Columns.Count; j++)
{
//jsonBuilder.Append("");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append(
":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append(
"\",");
}
jsonBuilder.Remove(jsonBuilder.Length
- 1, 1); jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length
- 1, 1); jsonBuilder.Append("]");
return jsonBuilder.ToString();
}
紫炁星的主页 紫炁星 | 初学一级 | 园豆:57
提问于:2011-09-06 18:15
< >
分享
最佳答案
0

我写了一个示例,你可以参考一下:

前台页面

 

<html>
<head>
<title>Demo</title>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<link href="../../Content/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
var data;
$(
function () {
$.ajax({
type:
"get",
url:
'/index/GetData',
dataType:
'text',
success:
function (result) {
data
= eval('('+result+')');
InitData();
},
error:
function (msg) {
alert(
"出错啦:" + msg);
}
});
});

function InitData() {
$(
'#example').autocomplete(data, {
max:
12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: false, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function (row) {
return row.cityEnglish + '"[' + row.cityName + ']';
},
formatMatch:
function (row, i, max) {
return row.cityEnglish + row.cityName;
},
formatResult:
function (row) {
return row.cityName;
}
}).result(
function (event, row, formatted) {
alert(row.cityName);
});
}
</script>
</head>
<body>
API Reference:
<input id="example" />
</body>
</html>

 

GetData方法:

public string GetData()
{
string emails = "[{\"cityEnglish\":\"BEIJING\",\"cityName\":\"北京\",\"airportThreeZiMa\":\"PEK\"}," +
"{\"cityEnglish\":\"BEIJING\",\"cityName\":\"北京\",\"airportThreeZiMa\":\"NAY\"}," +
"{\"cityEnglish\":\"CHANGCHUN\",\"cityName\":\"长春\",\"airportThreeZiMa\":\"CGQ\"}," +
"{\"cityEnglish\":\"CHANGSHA\",\"cityName\":\"长沙\",\"airportThreeZiMa\":\"CSX\"}," +
"{\"cityEnglish\":\"CHENGDU\",\"cityName\":\"成都\",\"airportThreeZiMa\":\"CTU\"}," +
"{\"cityEnglish\":\"CHONGQING\",\"cityName\":\"重庆\",\"airportThreeZiMa\":\"CKG\"}," +
"{\"cityEnglish\":\"CHONGQING\",\"cityName\":\"重庆\",\"airportThreeZiMa\":\"WXN\"}," +
"{\"cityEnglish\":\"GUANGZHOU\",\"cityName\":\"广州\",\"airportThreeZiMa\":\"CAN\"}," +
"{\"cityEnglish\":\"HANGZHOU\",\"cityName\":\"杭州\",\"airportThreeZiMa\":\"HGH\"}," +
"{\"cityEnglish\":\"KUNMING\",\"cityName\":\"昆明\",\"airportThreeZiMa\":\"KMG\"}," +
"{\"cityEnglish\":\"SHANGHAI\",\"cityName\":\"上海\",\"airportThreeZiMa\":\"SHA\"}," +
"{\"cityEnglish\":\"SHANGHAI\",\"cityName\":\"上海\",\"airportThreeZiMa\":\"PVG\"}," +
"{\"cityEnglish\":\"SHENZHEN\",\"cityName\":\"深圳\",\"airportThreeZiMa\":\"SZX\"}," +
"{\"cityEnglish\":\"ZHENGZHOU\",\"cityName\":\"郑州\",\"airportThreeZiMa\":\"CGO\"}]";
return emails;
}

我的代码跟你的基本相同,不同之处在于调用的是一个webservice中的方法,你的是一个面面。

 

关键点在于我先用ajax取得字符串后转换成了json格式,你那里获取到的只是一个字符串,所以要转换一下

收获园豆:10
artwl | 专家六级 |园豆:16736 | 2011-09-07 00:39

谢谢!用到你的方法的确解决了问题。非常感谢!

紫炁星 | 园豆:57 (初学一级) | 2011-09-07 08:47

你好:
JQuery autocomplete 中 怎么让鼠标单击文本框的时候,显示另外一种数据。
其他的时候,显示一种数据。
还有,可以根据,输入文本框不同的值来定义匹配项吗。
比如:输入的是汉字 匹配一种

输入的是数字,匹配另一种!

谢谢了

紫炁星 | 园豆:57 (初学一级) | 2011-09-07 10:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册