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上,这里为其加一个滚动条即可解决上述问题。
宝剑锋从磨砺出,梅花香自苦寒来。