这是自动补全的第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