• 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上,这里为其加一个滚动条即可解决上述问题。

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    工具.MySQL
    SqlServer.日期时间格式化输出(资料)
    SqlServer2012.安装
    SQL.【转】获取存储过程返回值的几种方式
    SQL.【转】SqlServer如何获取存储过程的返回值
    SQL.@,@@、#,##
    Oracle10g.CentOS6安装_遇到的问题(02)
    jQuery FileUpload 插件[转]
    EF6+Oracle12c+DBFirst+VS2015:EF6.0添加实体模型闪退问题解决
    IIS
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7666368.html
Copyright © 2020-2023  润新知