Jquery autocomplete插件的使用
jquery.autocomplete参考地址
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete
http://www.open-open.com/ajax/ajax20080314223855.htm
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自定义提示</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.js" type="text/javascript"></script>
<link href="CSS/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var emails = [
{ name: "Peter Pan", to: "peter@pan.de",hot:"1" },
{ name: "Molly", to: "molly@yahoo.com", hot: "1" },
{ name: "Forneria Marconi", to: "live@japan.jp", hot: "1" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com", hot: "1" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com", hot: "1" },
{ name: "Don Corleone", to: "don@vegas.com", hot: "1" },
{ name: "Mc Chick", to: "info@donalds.org", hot: "1" },
{ name: "Donnie Darko", to: "dd@timeshift.info", hot: "1" },
{ name: "Quake The Net", to: "webmaster@quakenet.org", hot: "1" },
{ name: "Dr. Write", to: "write@writable.com", hot: "1" },
{ name: "GG Bond", to: "Bond@qq.com", hot: "1" },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com", hot: "1" }
];
function initcatalogselect(basecode, showid, destid, showcatalog) {
$.ajax({
url: "source.html",
data: "basecode=" + basecode + "&show=" + showcatalog, cache: false,
success: function (xml) {
$("#" + showid).attr("searchdata", xml);
InitSerachAirPage(showid, destid);
}
});
}
function InitSerachAirPage(showid, destid) {
var data = $("#" + showid).attr("searchdata");
var ardata = data.split("$$");
var CityList = eval(ardata[1]);
var citystemp = new Array();
for (i = 0; i <= CityList.length; i++) {
for (j = 0; j < CityList[i].length; j++) {
citystemp.push(CityList[i][j]);
}
}
// citystemp;
// emails;
// var CityList = ardata[1].split("[[")[1].split("]]")[0].split("],[");
// var CityLists = new Array();
// CityLists = CityList[0];
// .concat(CityList[1])
$(function () {
$('#keyword').autocomplete(citystemp, {
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function (row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.Value + ']';
},
formatMatch: function (row, i, max) {
return row.name + row.Value;
},
formatResult: function (row) {
return row.name;
}
}).result(function (event, row, formatted) {
alert(row.Value);
});
});
}
$(document).ready(function () {
//初始化控件
initcatalogselect("C01", "keyword", "", "1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
</div>
</form>
</body>
</html>
source.html:
400,门电,其他,上门客,网络$$[[ { name: '加油站-400', Value: 'C0102', hot: '1' }, { name: 'DM-400', Value: 'C0104', hot: '1' }, { name: '大客户-400', Value: 'C0105', hot: '1' }, { name: '其它-400', Value: 'C0107', hot: '1' }, { name: 'google-400', Value: 'C0108', hot: '1' }, { name: '百度-400', Value: 'C0109', hot: '1' }, { name: '公司网站-400', Value: 'C0110', hot: '1' }, { name: '短信-400', Value: 'C0111', hot: '1' }, { name: '出租车-400', Value: 'C0112', hot: '1' }, { name: '公交车-400', Value: 'C0113', hot: '1' }, { name: '公务车-400', Value: 'C0114', hot: '1' }, { name: '门店招牌-400', Value: 'C0117', hot: '1' }, { name: '电台-400', Value: 'C0120', hot: '1' }, { name: '纸巾包-400', Value: 'C0121', hot: '1' }, { name: '晨报-400', Value: 'C0127', hot: '1' }, { name: '解放日报-400', Value: 'C0128', hot: '1' }, { name: '朋友介绍-400', Value: 'C0131', hot: '1' }, { name: '九天音乐-400', Value: 'C0154', hot: '1' }, { name: '盛大车险-400', Value: 'C0155', hot: '1' }],[ { name: '短信-门店电话', Value: 'C0118', hot: '1' }, { name: '晨报-门店电话', Value: 'C0137', hot: '1' }, { name: '百度-门店电话', Value: 'C0138', hot: '1' }, { name: 'google-门店电话', Value: 'C0139', hot: '1' }, { name: '出租车-门店电话', Value: 'C0140', hot: '1' }, { name: '门店招牌-门店电话', Value: 'C0141', hot: '1' }, { name: '朋友介绍-门店电话', Value: 'C0142', hot: '1' }, { name: '加油站-门店电话', Value: 'C0143', hot: '1' }, { name: '电台-门店电话', Value: 'C0158', hot: '1' }],[ { name: '4S', Value: 'C0101', hot: '1' }, { name: '信息合作点', Value: 'C0106', hot: '1' }, { name: '建行', Value: 'C0116', hot: '1' }, { name: '朋友介绍', Value: 'C0119', hot: '1' }, { name: '老客户', Value: 'C0122', hot: '1' }, { name: '114查询', Value: 'C0123', hot: '1' }, { name: '50元活动', Value: 'C0124', hot: '1' }, { name: '晨报', Value: 'C0125', hot: '1' }, { name: '解放日报', Value: 'C0126', hot: '1' }, { name: '开新二手车', Value: 'C0156', hot: '1' }, { name: '电台-短信', Value: 'C0159', hot: '1' }, { name: '电台-电话', Value: 'C0160', hot: '1' }, { name: '车王二手车', Value: 'C0161', hot: '1' }, { name: '名流', Value: 'C0162', hot: '1' }],[ { name: '短信-上门客', Value: 'C0103', hot: '1' }, { name: '晨报-上门客', Value: 'C0144', hot: '1' }, { name: '百度-上门客', Value: 'C0145', hot: '1' }, { name: 'google-上门客', Value: 'C0146', hot: '1' }, { name: '出租车-上门客', Value: 'C0147', hot: '1' }, { name: '门店招牌-上门客', Value: 'C0148', hot: '1' }, { name: '朋友介绍-上门客', Value: 'C0149', hot: '1' }, { name: '加油站-上门客', Value: 'C0150', hot: '1' }, { name: '电台-上门客', Value: 'C0157', hot: '1' }],[ { name: '51汽车网', Value: 'C0115', hot: '1' }, { name: '百度-网上', Value: 'C0129', hot: '1' }, { name: 'google-网上', Value: 'C0130', hot: '1' }, { name: '晨报-网上', Value: 'C0132', hot: '1' }, { name: '加油站-网上', Value: 'C0133', hot: '1' }, { name: '朋友介绍-网上', Value: 'C0134', hot: '1' }, { name: '短信-网上', Value: 'C0135', hot: '1' }, { name: '出租车-网上', Value: 'C0136', hot: '1' }, { name: '赶集网', Value: 'C0151', hot: '1' }, { name: '58同城', Value: 'C0152', hot: '1' }, { name: '百姓网', Value: 'C0153', hot: '1' }]];
