Angular UI Bootstrap Typeahead ignore field

Question

I am using Angular UI-Bootstrap's typeahead

<input type="text" name="recipient" id="recipient" placeholder="Friend's name or username"
 autofocus="autofocus"
 class="form-control"
 ng-model="payment.recipient"
 typeahead="friend.username for friend in friends | filter:$viewValue | limitTo:4"
 typeahead-template-url="typeaheadTemplate.html"
 typeahead-editable="false"
 ng-required="true"/>

Each Friend object has the following structure:

{
    name: friendship.name,
    username: friendship.username,
    picture: friendship.picture // Url
}

It doesn't make sense to allow users to search by picture (it's a url to the avatar) and have had no success modifying the filter.

What I've tried:

typeahead="friend.username for friend in friends| filter:{username:username, name:name} | filter:$viewValue | limitTo:4"
typeahead="friend.username for friend in friends | filter:{username:$viewValue, name:$viewValue} | limitTo:4"

Using $viewValue twice on the filter expression seems to break it... Any ideas?

Is this a translation typo or does your code actually look like: "friend.username for friend for friend" — Rob J
– Rob J, Commented Apr 25, 2014 at 22:25
It seems to be doing an 'and' filter ($viewValue matches on name and username) rather than an 'or' filter. — Rob J
– Rob J, Commented Apr 26, 2014 at 12:12
See plunk here: plnkr.co/edit/EOmc7SWJaukcpMsKKKgQ?p=preview based on question here: stackoverflow.com/questions/16045069/… — Rob J
– Rob J, Commented Apr 26, 2014 at 12:38

Wawy · Accepted Answer · 2014-04-25 15:44:32Z

0

Try this:

typeahead="friend.username for friend in myFilterFunc($viewValue) | limitTo:4"

and in your controller:

$scope.myFilterFunc = function(viewValue) {
  var filteredFriends = [];
  angular.forEach($scope.friends, function(friend) {
    if ((friend.username.indexOf(viewValue) > -1) || 
       (friend.name.indexOf(viewValue) > -1)) 
       {
         filteredFriends.push(friend);
       }
  });
  return filteredFriends;
};

answered Apr 25, 2014 at 15:44

Wawy

6,2692 gold badges26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wawy Over a year ago

Please, be more specific what doesn't exactly work? It worked in my plnker.

Collectives™ on Stack Overflow

Angular UI Bootstrap Typeahead ignore field

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related