仅使用Angularjs自动完成
这是使用AngularJS实现自动完成功能的最好方法,而不使用任何Jquery资产。请帮我举一些例子。查看 指示 查看仅使用Angularjs自动完成,angularjs,autocomplete,Angularjs,Autocomplete,这是使用AngularJS实现自动完成功能的最好方法,而不使用任何Jquery资产。请帮我举一些例子。查看 指示 查看 对我来说很好,希望对你也很好 使用有角度的ui-typeahead <div ng-app='MyModule'> <div ng-controller='DefaultCtrl'> <input auto-complete ui-items="names" ng-model="selected"> s
对我来说很好,希望对你也很好 使用有角度的ui-typeahead
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input auto-complete ui-items="names" ng-model="selected">
selected = {{selected}}
</div>
</div>
function DefaultCtrl($scope) {
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}
angular.module('MyModule', []).directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
<div class>
<h2>AngularJS Autocomplete</h2>
<input type="text" class="form-control" placeholder="Search for city" name="city" ng-model="city" ng-keyup="complete(city)">
<ul class="list-group" >
<li class="list-group-item" ng-repeat="cityname in filteredCity" ng-click="fillTextbox(cityname)">
{{cityname}}
</li>
</ul>
</div>
$scope.cityList = ["Chennai", "Bangalore", "Hyderabad", "Coimbatore", "Mumbai", "Allahabad", "Delhi", "Kadapa", "Anantapur", "Tirupati", "Chandigarh", "Kolkata", "Srinagar"]
$scope.complete = function(string) {
if(string.length !== 0) {
var output = [];
angular.forEach($scope.cityList, function(city) {
if(city.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(city);
}
});
$scope.filteredCity = output;
}
else {
$scope.filteredCity = null;
}
};
$scope.fillTextbox = function(string) {
$scope.city = string;
$scope.filteredCity = null;
};