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

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    springcolud 的学习(一),架构的发展史
    shiro框架的学习
    Mybatis分页插件PageHelper简单使用
    对于解决VS2015启动界面卡在白屏的处理方法
    C# 运行流程
    转:什么是DIP、IoC、DI
    IQueryable,IEnumerable,IList区别
    easyUi——datetimebox绑定数据失效
    前后端参数传递的学习笔记
    java 多线程学习总结
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7666368.html
Copyright © 2011-2022 走看看