jqueryui autocomplete的使用与angular配合的小坑

刚开始在做搜索联想功能时，使用了jquery.autocomplete.js插件，当并不理想，首先插件老旧，也只适合老版的jquery。其次在数组中只能联想到首字母一样的数据，比如[12,23,222,422]这个数组，输入关键字2时，只能联想到23和222这两个数据，很不理想，所以放弃。

之后发现一款jqueryui autocomplete自动完成插件，听所是之前jquery.autocomplete.js插件搬过来改进的，不关注。下面研究一下插件功能。

导入文件：<link rel="stylesheet" href="../../css/jquery-ui.css">

$http.get(api).then(function(result){
if(result.status==200) {
if(result.data.code == 0 ){
$( "#keyword" ).autocomplete({
source:result.data.data,
select: function(event, ui) {
appearHist(ui.item.value);
mui.openWindow({
url: 'search_reasult.html?searchKey='+ui.item.value,
id: 'result',
extras: {
name: 'mui'
}
});
},
open:function(event,ui){ //open：当联想数据ul列表打开后执行的函数,深坑！原以为ui.item为联想到的数据，然后可以通过angular绑定到布局好的列表上呈现。让jqueryui自带的列表隐藏。然而ui好像只是摆设。
$scope.$apply(function(){
$scope.maskShow=true;
});
},
close:function(event,ui){ //close：当联想到的列表关闭后执行的事件。通过open与close可以实现change的事件。主要jqueryui的change事件其实是blur事件，鼠标离开点击时才会执行，简直了。
$scope.$apply(function(){
$scope.maskShow=false;
});
}
});
}else{
mConfirm("服务器繁忙，请刷新");
}
}else{
mConfirm("网络不好页面刷不出来呢，请刷新");
}
});

首先，我从后台获取到需要联想的数组，刚开始想用source的函数形式来进行联想筛选呈现，但好像每次联想都调服务器接口，消耗资源，所以就本地自动完成。

属性介绍：search :每次搜索之前发生，并没有什么用，和response一样。而且在value为空的时候并不发生。

与angular配合时，我先执行的这个插件的代码，发现angular指令全部失效，可能与angular安全机制有关系。所以加了ready函数，让angular代码先执行。这样就成功了。加$apply也是可以解决短代码的。

巴特西

jqueryui autocomplete的使用与angular配合的小坑

最新文章

热门文章