学习jquery.autocomplete的使用
json格式的返回数据得用eva
数组 实现autocomplete功能 类似百度搜索框
后台 test.aspx 传回一串字符串给前台
var data = "Core |Selectors| Attributes |Traversing| Manipulation| CSS |Events Effects |Ajax Utilities ";
Response.Clear();
Response.Write(data);
Response.End();
前台 用split()方法转为数组 注意要在页面增加一个ID为txtNameCn的文本框
<script src=" http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function() {
$.ajax({ type: "get", contentType: "application/json", url: "test.aspx", success: function(data) {
var arr = data.split("|");//以|为分界线 将字符串转换为数组
$("#txtNameCn").autocomplete(arr);
} });
// $("#txtNameCn").autocomplete(arr);
});
</script>
前台
$(document).ready(function() {
$.ajax({
type: "get",
contentType: "application/json",
url: "returndata.aspx",
success: function(data) {
var data = eval("("+data+")");
$("#txtNameCn").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.NameCn;
},
formatMatch: function(row, i, max) {
return row.NameCn;
},
formatResult: function(row) {
return row.NameCn;
}
});
$("#txtNameEn").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.NameEn;
},
formatMatch: function(row, i, max) {
return row.NameEn;
},
formatResult: function(row) {
return row.NameEn;
}
});
$("#txtIMO").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.IMO;
},
formatMatch: function(row, i, max) {
return row.IMO;
},
formatResult: function(row) {
return row.IMO;
}
});
}
})
})
</script>