Вот основные DEMO о том, как реализовать ui-bootstrap typeahead. Я использовал асинхронный вызов для получения результатов типа вперед из функции cities($viewValue)
, вместо этого вы можете просто передать объект списка здесь.
Ваш HTML будет выглядеть следующим образом со следующими сценариями
<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>
Ваш контроллер JS будет иметь ниже код.
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;
});
});
};
}]);
Вы можете использовать тег datalist HTML – Weedoze
Вы проверили эту директиву? https://github.com/ghiden/angucomplete-alt – katmanco