I'm refining my ui.bootstrap typeahead adding some awesomness, but I'm struggling on this one.

I've created a small Plunker to demonstrate my issue:

Two words about the issue:
I have this array of objects which populate my $scope.data but I'm not able to tell typeahead to use only a particular field to search the result

$scope.data = [
  {
    name: 'Mario',
    desc: 'Super Plumber',
    id: 0,
    type: 'good'
  },
  {
    name: 'Luigi',
    desc: 'Assistant Plumber',
    id: 1,
    type: 'good'
  }, 
...

Whenever you search in the typeahead, you'll search for every field in the object, even type and id

I've tried, without success, solution like these:

typeahead="datum.name as ( datum.name +', '+ datum.desc) 
    for datum in data | filter:$viewValue | limitTo:8"

---> no change


typeahead="datum as ( datum.name +', '+ datum.desc) 
    for datum.name in data | filter:$viewValue | limitTo:8"

--> no match

How can I restrict the search to, let's say, the name field?

I'm refining my ui.bootstrap typeahead adding some awesomness, but I'm struggling on this one.

I've created a small Plunker to demonstrate my issue:
http://plnkr.co/edit/u2Le37?p=preview

Two words about the issue:
I have this array of objects which populate my $scope.data but I'm not able to tell typeahead to use only a particular field to search the result

$scope.data = [
  {
    name: 'Mario',
    desc: 'Super Plumber',
    id: 0,
    type: 'good'
  },
  {
    name: 'Luigi',
    desc: 'Assistant Plumber',
    id: 1,
    type: 'good'
  }, 
...

Whenever you search in the typeahead, you'll search for every field in the object, even type and id

I've tried, without success, solution like these:

typeahead="datum.name as ( datum.name +', '+ datum.desc) 
    for datum in data | filter:$viewValue | limitTo:8"

---> no change


typeahead="datum as ( datum.name +', '+ datum.desc) 
    for datum.name in data | filter:$viewValue | limitTo:8"

--> no match

How can I restrict the search to, let's say, the name field?

• javascript
• angularjs
• angular-ui
• angular-ui-bootstrap

1 Answer 1

The magical line is as following

filter:{name: $viewValue}

This would limit the search to only name field. Look at this document ion for ng-filter

Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.

Plunker Updated