项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" href="jquery.autocomplete.css" />
<script type="text/javascript" src="Jquery-autocomplete.js"></script>
<script type="text/javascript" src="jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="autocompelte/jquery.autocomplete-min.js"></script>
<%--
//$(document).ready(function()
//{
//$("#<%=txtUser.ClientID %>").autocomplete("GetCode.aspx",{
// width: 155,
// selectFirst: true,
// autoFill: true,
// minChars: 0,
// scroll: true,
// mustMatch: true
//
// });
//});--%>
<script language="javascript" 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: "[email protected]" },
{ name: "GG Bond", to: "[email protected]" },
{ name: "Zhuzhu Xia", to: "[email protected]" }
];
$(function() {
$(‘#keyword‘).autocomplete("GetCode.aspx", {
// max: 12, //列表里的条目数
// minChars: 0, //自动完成激活之前填入的最小字符
// width: 400, //提示的宽度，溢出隐藏
// scrollHeight: 300, //提示的高度，溢出显示滚动条
// matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
// autoFill: false //自动填充
//// formatItem: function(row, i, max) {
//// return i + ‘/‘ + max + ‘:"‘ + row.name + ‘"[‘ + row.to + ‘]‘;
//// },
//// formatMatch: function(row, i, max) {
//// return row.name + row.to;
//// },
//// formatResult: function(row) {
//// return row.to;
//// }
// }).result(function(event, row, formatted) {
// alert(row.to);
// });
// });
minChars: 0,
max:10,
width: 400,
matchCase:false,//不区分大小写
// matchContains :true,
// autoFill: false,
scroll: false,
dataType: ‘json‘,
scrollHeight: 500,
//此处为传递参数
extraParams:{v:function() { return $(‘#keyword‘).val();}},
//需要把data转换成json数据格式
parse: function(data) {
return $.map(eval(data), function(row) {
return {
data: row,
value: row.Guage, //此处无需把全部列列出来，只是两个关键列
result: row.Matcode
}
});
},
formatItem: function(data, i, total) {
return "<table><tr><td align=‘left‘>" + data.Guage + "</td><td align=‘right‘> " + data.Unit + " </td></tr></table>";
},
formatMatch: function(data, i, total) {
return data.Guage;
},
formatResult: function(data, value) {
return data.Guage;
}
}).result(function(event, data, formatted) { //回调
$(‘#keyword‘).val(data.Matcode); //不知为何自动返回值后总是加了个“,”,所以改成后赋值
$("#content").val(data.Guage+data.Unit);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
<%--搜索：<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>--%>
</div>
</form>
</body>
</html>