autocomplete的使用

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: "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" },

{ name: "GG Bond", to: "Bond@qq.com" },

{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }  ];

$(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" />