您的位置：首页 > Web前端 > JQuery

autocomplete与jQuery高版本整合问题

2015-02-08 12:45 176 查看

这是自动补全的第3篇文章，也是最后一篇

也许你看到这个标题很疑惑。是的，为什么自动补全和jQuery会有兼容整合问题。首先这里的高版本指的是jQuery1.9及以上版本。

代码如下：

<!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.10.2.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>

其实代码相对第2篇没有任何改变，只是引用的jQuery变了。

结果是在浏览器下报错，如下：

报错的原因是：在jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ，取而代之的是 $.support 。

那么我们怎么修改文件，是autocomplete能够在jQuery 1.9及以上版本使用呢？

其实很简单，我们把jquery.autocomplete.js 中所有的 browser 改为 support 就可以了。

修改共有3处，如下：

修改完后再次测试，我们就会发现可以正常使用了，没有任何问题。

当然修改完后如果引用的jQuery版本在 1.8 及之下的版本都可以使用，因为这些版本中也有 support。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航