刚开始在做搜索联想功能时,使用了jquery.autocomplete.js插件,当并不理想,首先插件老旧,也只适合老版的jquery。其次在数组中只能联想到首字母一样的数据,比如[12,23,222,422]这个数组,输入关键字2时,只能联想到23和222这两个数据,很不理想,所以放弃。
之后发现一款jqueryui autocomplete自动完成插件,听所是之前jquery.autocomplete.js插件搬过来改进的,不关注。下面研究一下插件功能。
导入文件:<link rel="stylesheet" href="../../css/jquery-ui.css">
<script src="../../js/jquery/jquery-ui.js"></script>
$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也是可以解决短代码的。