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();
}
最佳答案
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
谢谢！用到你的方法的确解决了问题。非常感谢！
你好：
JQuery autocomplete 中 怎么让鼠标单击文本框的时候，显示另外一种数据。
其他的时候，显示一种数据。
还有，可以根据，输入文本框不同的值来定义匹配项吗。
比如：输入的是汉字 匹配一种
输入的是数字，匹配另一种！
谢谢了
