这是自动补全的第2篇文章,如果我们的数据时英文或则数字,那么在谷歌、火狐、IE下都可以使用。
但是如果有中文,那么在火狐下不能实时匹配。
如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>火狐下自动补全对中文的支持</title>
<link rel="stylesheet" type="text/css" href="../js/jquery-autocomplete/jquery.autocomplete.css"></link>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery-autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var msg = '[{cityId:"101",cellId:"1011",cellName:"富世康园"},'+
'{cityId:"101",cellId:"1014",cellName:"恒大绿洲小区"},'+
'{cityId:"101",cellId:"1015",cellName:"金盛园小区"},'+
'{cityId:"101",cellId:"1016",cellName:"东山雅居小区"},'+
'{cityId:"101",cellId:"1017",cellName:"海棠家园"},'+
'{cityId:"101",cellId:"1018",cellName:"御都新天地"},'+
'{cityId:"101",cellId:"1027",cellName:"瑞生丽园小区"},'+
'{cityId:"101",cellId:"1028",cellName:"南中环联通南大楼"},'+
'{cityId:"101",cellId:"1212",cellName:"朝阳新区小区"},'+
'{cityId:"101",cellId:"1777536",cellName:"山西焦煤集团滨河小区"},'+
'{cityId:"101",cellId:"1777537",cellName:"白煜小区"}'+
']';
var cellData = (new Function('return '+msg +';'))();
$("#selectCell").click(function(){
$('#selectCell').autocomplete(cellData, {
max: 10, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 395, //提示的宽度,一行放不下则换行
scrollHeight: 150, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,只要有匹配的内容,那么就显示匹配行内容
autoFill: false, //自动填充
cacheLength: 1, // 要缓存多少条记录.设成1为不缓存.Default: 10
// mustMatch: true, // 如果为true, 输入框中内容不匹配,那么清除输入框内容,重新开始输入
formatItem: function(row, i, max) {
// 信息显示格式
return i+ row.cellId + "["+ row.cellName+ "]";
},
formatMatch: function(row, i, max) {
// 匹配格式
// 根据小区ID和小区名称匹配
return row.cellId + row.cellName;
},
formatResult: function(row) {
// 返回输入框信息格式
return row.cellName;
}
}).result(function(event, row, formatted) {
// alert(row.cellName);
});
});
});
</script>
</head>
<body>
<input type="text" id="selectCell" name="selectCell">
</body>
</html>
在火狐下出现的问题:
那么如何解决呢?在jquery-autocomplete/jquery.autocomplete.js 中添加代码:
}).bind("input", function() {
onChange(0,true);
这样就好了。
具体原因请参考:http://blog.sina.com.cn/s/blog_6ebc885a01013faj.html