autocomplete使用分为本地调用方法和读取远程读取数据源的方法
（1）本地调用方法
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
var emails = [
{ name: "Peter Pan", to: "[email protected]" },
{ name: "Molly", to: "[email protected]" },
{ name: "Forneria Marconi", to: "[email protected]" },
{ name: "Master <em>Sync</em>", to: "[email protected]" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "[email protected]" },
{ name: "Don Corleone", to: "[email protected]" },
{ name: "Mc Chick", to: "[email protected]" },
{ name: "Donnie Darko", to: "[email protected]" },
{ name: "Quake The Net", to: "[email protected]" },
{ name: "Dr. Write", to: "write[email protected]" },
{ name: "GG Bond", to: "[email protected]" },
{ name: "Zhuzhu Xia", to: "[email protected]" } ];
$(function ()
{
$(‘#txt‘).autocomplete(emails, {
max: 12, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最小字符,如果为0，则双击时显示全部
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function (row, i, max)
{
return row.name;
},
formatMatch: function (row, i, max)
{
return row.name;
},
formatResult: function (row)
{
return row.name;
}
});
});
</script>
<input type="text" id="txt" />
（2）远程调用数据源的方法
后台.js
ViewState["data"]="[{ name: \"Peter Pan\"},{ name: \"Molly\"},{ name: \"Forneria Marconi\"},{ name: \"Don Corleone\"}]";
前台
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
var data = ‘<%= ViewState["data"] %>‘;
var da = eval(‘(‘ + data + ‘)‘);
$(‘#txt‘).autocomplete(da, {
max: 12, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最小字符,如果为0，则双击时显示全部
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function (row, i, max)
{
return row.name;
},
formatMatch: function (row, i, max)
{
return row.name;
},
formatResult: function (row)
{
return row.name;
}
});
});
</script>
<input type="text" id="txt" />