I am making a tag field in form and I want to make this field autocomplete so that it shows suggestions from my $scope variable i.e local source.
<tags-input ng-model="tModel.tags"></tags-input>
But since my project does not use jquery I cannot use the jquery autocomplete feature.is there any way to make autocomplete using angularJs.
PS: i have searched many answers in stackoverflow but none worked for me.
Here is the basic DEMO on how to implement ui-bootstrap typeahead.I have used async call to fetch type ahead results from function cities($viewValue) instead you can just pass a list object here.
Your HTML will look like this with following scripts
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="plunker">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" class="form-control" uib-typeahead="address for address in cities($viewValue)" />
</div>
</body>
</html>
Your JS controller will have below code.
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('dataProviderService', ['$http', function($http) {
var factory = {};
factory.getCities = function(input) {
return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
params: {
address: input,
sensor: false
}
});
};
return factory;
}]);
app.controller('TypeaheadCtrl', ['$scope', '$log','$http', 'dataProviderService', function($scope, $log,$http, dataProviderService) {
$scope.cities = function(viewValue) {
return dataProviderService.getCities(viewValue).then(function(response) {
return response.data.results.map(function(item) {
return item.formatted_address;
});
});
};
}]);
Try using Angular UI Bootstrap Typeahead directive.
<input type="text" ng-model="services" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"></tags-input>