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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 仿百度输入框智能提示 使用bootstrap typeahead输入框自动补全之 问题与解决 angularJs实现动态增加输入框 Angucomplete —— AngularJS 自动完成输入框 打造基于jQuery的智能选择输入框 基于 jQuery & CSS3 实现智能提示输入框光标位置 js中实现输入框类似百度搜索的智能提示效果 输入框的提示文字的样式设置