• 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">

                     <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也是可以解决短代码的。

  • 相关阅读:
    Qt高级编码约定
    QTextCodec::codecForLocale
    无边框窗口拖动代码
    QString QByteArray char 之间的转换
    Qt 程序发布指南
    qt demo pro
    snort vtun performance on vm
    xhEditor用法
    MVC控制器使用总结
    第七章 模态框
  • 原文地址:https://www.cnblogs.com/changyaoself/p/7069992.html
Copyright © 2020-2023  润新知