基于jquery.autocomplete实现拼音中文自动提示
如何实现基于“jquery.autocomplete”实现拼音中文自动提示,直接上代码吧
其中三个参数:row:一行数据({}),i:第几行,max:总行数。这里返回自定义格式的数据。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自定义提示</title>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="jquery.autocomplete.css" />
<script type="text/javascript">
var emails = [
{ name: "datong dt", to: "大同" },
{ name: "beijing bj", to: "北京" },
{ name: "tianjin tj", to: "天津" },
{ name: "hefei hf", to: "合肥" },
{ name: "shanghai shh sh", to: "上海" }
];
$(function() {
$('#keyword').autocomplete(emails, {
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 + ']';
return 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);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
</div>
</form>
</body>
</html>
