Check out this plunker that showcases a feature I am aiming to achieve.
My goal is to implement an auto-complete list for users to filter the table.
Currently, the filtering works smoothly while the user is typing. However, if the user selects an option from the auto-complete list, the filtering stops working.
Here's an example scenario:
- The plunker displays a list of 30 badges that Stack Overflow users can earn.
- I type 'Au' into the text box; the filter narrows down the list to two badges.
Next, I press the down arrow button and then hit enter.
'Autobiographer' gets auto-completed in the textbox, but the list still shows only two items.
How can I ensure that selecting an auto-complete option also triggers the list to be filtered accordingly?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45242b22302924376b2f3605746b766b7c">[email protected]</a>" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
var app = angular.module('app', []);
app.factory('badges', ['$http', function($http) {
return $http.get('https://api.stackexchange.com/2.2/badges?page=1&order=desc&sort=rank&site=stackoverflow')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
app.factory('badgesagain', ['$http', function($http) {
return $http.get('https://api.stackexchange.com/2.2/badges?page=1&order=desc&sort=rank&site=stackoverflow')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
app.controller('ctrl', ['$scope', 'badges', 'badgesagain', function($scope, badges, badgesagain){
badgeNames = [];
badges.then(function(response){
for(var i=0; i < response.data.items.length; i++){
badgeNames[i] = response.data.items[i].name;
}
});
$scope.availableTags = badgeNames;
$scope.complete = function () {
console.log('running');
$( "#tags" ).autocomplete({
source: $scope.availableTags
});
};
badges.success(function(data) {
$scope.badgeList = data['items'];
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" ng-keyup="complete()" ng-model="c.name"/>
</div>
<ol>
<li ng-repeat="badge in badgeList | filter:c ">
{{ badge.name }}
</li>
</ol>
<body ng-app="app" ng-controller="ctrl">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" ng-keyup="complete()" ng-model="c.name"/>
</div>
<ol>
<li ng-repeat="badge in badgeList | filter:c ">
{{ badge.name }}
</li>
</ol>
</body>
</html>
</body>
</html>