Autocomplete, datalist in angularJS
HTML
<div ng-app="app">
<div ng-controller="ListCtrl">
<input id="name" name="name" list="names" placeholder="Type 'Anna'" />
<datalist id="languages">
<option value="Bolivia">
<option value="Ecuador">
<option value="Venezuela">
<option value="Chile">
<option value="Paraguay">
<option value="Brasil">
<option value="Peru">
</datalist>
</div>
</div>
JavaScript
var phonecatApp = angular.module('app', []);
phonecatApp.controller('ListCtrl', function ($scope) {
$scope.items = ['Anthony', 'Angel', 'Anna', 'Aurelio'];
//var fakeServerResponse = ['Anthony', 'Angel', 'Anna', 'Aurelio'];
var datalist = document.getElementById('names');
document.getElementById('name').addEventListener('keyup', function () {
if (this.value.length === 0) {
return;
}
// Send Ajax request and loop of its result
datalist.textContent = '';
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].indexOf(this.value) !== 0) {
continue;
}
var option = document.createElement('option');
option.value = $scope.items[i];
datalist.appendChild(option);
}
});
});