I have been experimenting with the angular-ui typeahead directive to create a filtered input box that only shows items based on what has been typed. However, my current code is displaying all the items instead of just the filtered ones.
If you'd like to take a look at the code, I have created a plunker which can be found here.
I would greatly appreciate any guidance on what might be wrong with my implementation. Thank you!
In case you are unable to access the plunker, here is a snippet of the relevant HTML:
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Testing angular-ui Typeahead</h4>
<input type="text" ng-model="typeahead" typeahead="names for names in getName($viewValue) " class="form-control">
</div>
And here is the relevant JS code:
function TypeaheadCtrl($scope, $http)
{
// Function to load values asynchronously
$scope.getName = function(val)
{
return $http.get('test.json')
.then(function(res)
{
var names = [];
angular.forEach(res.data, function(item)
{
names.push(item.name);
});
return names;
});
};
}
The json file obtained from the http request looks like this:
[
{
"name": "Tom"
},
{
"name": "Tom2"
}
]