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上，這里為其加一個滾動條即可解決上述問題。