CODEWITHSUNDEEP
angularjsangular-ui
juju
juju

Reputation: 449

Angularjs UI-Select

I am using Angular ui-select (http://github.com/angular-ui/ui-select). The default behaviour of is to show all records containing the searched item, e.g. if the values contain:

ARMAGH ARGENTINA WARSAW

Typing 'AR' will find all of them. However, I only want it to match the beginning of the values, so in this case typing 'AR' should only find ARMAGH and ARGENTINA and not WARSAW. Is there a simple way to do this? Perhaps an option which I have missed?

Upvotes: 0

Views: 2341

Answers (1)

Asik
Asik

Reputation: 7977

You want to filter the result from left to right. So you need to add this filter (it is case-insensitive search)

app.filter('left2right', function() {
   return function( items, input) {
    var filtered = [];

   if(input === undefined || input === ''){
      return items;
    }

    angular.forEach(items, function(item) {

      if(item.name.toLowerCase().indexOf(input.toLowerCase()) == 0){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

Then, you need to update the filter as follows

<ui-select-choices repeat="country in countries | left2right: $select.search">

instead of regular filter

<ui-select-choices repeat="country in countries | filter: $select.search">

Working demo: http://plnkr.co/edit/PeRNWR5J8wpydzr3MJVW?p=preview

Upvotes: 2

Related Questions