Limit Angular UI-Bootstrap Typeahead to specific object property

Question

I have the following Angular UI-Bootstrap typeahead working great:

<input class="span2" type="text" ng-model="selectedStuff" typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"/>

Though, it's almost working too great. I'm able to display the stuffs.name for the purposes of the typeahead AND select the full stuff object in stuffs. The problem is that my $viewValue is matching all of the properties in stuff instead of just the stuff.name. I've tried adding the .name to various places in the typeahead with no luck. Is there a straightforward way to display and match only the .name but still return the entire object?

Mo. · Accepted Answer · 2016-09-21 12:12:42Z

38

The typeahead directive from the http://angular-ui.github.io/bootstrap/ repo was build to well fit into existing AngularJS ecosystem. This means that this directive tries to re-use as much as possible of syntax, filters and directives already used in AngularJS.

Back to your question - the filtering itself is done by the Angular's filter filter described here: http://docs.angularjs.org/api/ng.filter:filter The mentioned filter's syntax is flexible enough to limit searches to a selected set of properties:

typeahead="stuff as stuff.name for stuff in stuffs | filter:{name: $viewValue}"

Please notice: filter:{name: $viewValue}

Working plunk here: http://plnkr.co/edit/o1qWKq8LSmbbmVaYkOvb?p=preview

edited Sep 21, 2016 at 12:12

Mo.

27.6k36 gold badges167 silver badges236 bronze badges

answered Apr 16, 2013 at 20:17

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

3 Comments

Jesse Over a year ago

Thank you very much! I swear I've been trying to RTFM, but I guess I'm going to have a to keep at it.

Saad Farooq Over a year ago

I don't see the difference that filter: {name: $viewValue } I tried changing it to filter: $viewValue and the output was the same.

jklemmack Over a year ago

@SaadFarooq When you change the syntax t filter: $viewValue, angular basically creates a JSON string out of the object and searches that. The syntax pkozlowski used searches ONLY the name field. Test using the word "second" on the Plnkr above. It appears no where in the name fields. If you edit it as you've suggested, then "second" would show the 2nd result.

Collectives™ on Stack Overflow

Limit Angular UI-Bootstrap Typeahead to specific object property

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related