zoukankan      html  css  js  c++  java
  • angularjs 输入框智能提示typeahead

      

           通过在输入框中输入关键词,下拉框中出现带有输入框中关键词的选项。ps:选项内容来源于后台服务器。

    factory.js:

    function getKey(searchParams) {  //查询选项列表
        var deferred = $q.defer();
        $http({
            url: 'url',
            data: searchParams,
            method: 'POST'
        }).success(function (result) {
            if (result.success) {
                deferred.resolve(result.data);
            } else {
                deferred.reject(result);
            }
        }).error(function (result) {
            deferred.reject(result);
        });
        return deferred.promise;
    }
    

      

        html模板:

    <div class="form-group form-group-member">
        <input type="text" class="form-control" placeholder="请输入搜索关键词"
               ng-model="condition.keyName" uib-typeahead="key.keyName as key.keyName for key in keys | filter:$viewValue| limitTo:all">
    </div>
    

      

        controller.js:

    getKey();
    
    function getKey() {  //获取选项列表
        var promise = memberService.getKey();
        promise.then(function (data) {
            $scope.keys= data.dataList;
        }, function (error) {
            Alert.showMessage(error);
        });
    }
    

      

    ps:此处有个问题,limitTo用来限制下拉框中显示的选项个数,我在静态页面中就可以设置显示所有的选项数据,但在实际项目中却有些数据选项出不来,但输入完整的数据选项时它又能出来,一直没想明白,知道的小伙伴求指教啊

    ps:2017-11-6-记

    limitTo用来限制选项个数,但由于页面高度问题不能完全显示,只是显示了一部分,实际上后台返回的所有数据已经绑定到了li上,这里为其加一个滚动条即可解决上述问题。

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    彻底领悟javascript中的exec与match方法
    javascript doT 使用
    pluginstorage 插件
    html5离线储存,application cache,manifest使用体验
    window.location.hash属性介绍 ajax后退按钮失效问题
    控制textarea光标移到末尾
    webkitanylink 谷歌浏览器CSS之A:HOVER
    正则表达式详细参考文档
    复杂应用的 CSS 性能分析和优化建议
    seaJs api 帮助文档
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7666368.html
Copyright © 2011-2022 走看看