CODEWITHSUNDEEP
angularjsbootstrap-typeaheadangular-ui-bootstrap
domokun
domokun

Reputation: 3003

AngularJS - ui.bootstrap typeahead with an heterogeneous data array

I'm writing a typeahead search bar using ui.bootstrap typeahead and found the component pretty straight forward to use.

My Controller feeds the data into the $scope like this:

var good = [{ name: 'Mario', role: 'sup' },
            { name: 'Luigi', role: 'bro' },
            { name: 'Yoshi', role: 'pet' }]

var bad = [{ badname: 'Bowser', role: 'boss' },
           { badname: 'Sauron', role: 'eye' },
           { badname: 'Jason', role: 'knifer' }]

$scope.data = good.concat(bad)


Then, in the View, I have something like this:

<div class="container-fluid">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="datum.name for datum in data | filter:$viewValue | limitTo:4">
</div>


This ends up searching in the good guys, but not in the bad (because they have badname instead of name

Is there a way to search for both?

Bonus: I would love to show the role of my guys below their name... hints?
Edit: I'm aware of this Typeahead using object name to select the entire object, but I was hoping show it in the popup too...
Plnkr added here --> http://plnkr.co/edit/KqvUlf

Keep the console open, and you will see the issue about the label I was talking about

Only the good guys shows up, end even then the search throws up an exception when searching for a non existent field in the bad guys

Upvotes: 2

Views: 5006

Answers (3)

Thiago C. S Ventura
Thiago C. S Ventura

Reputation: 2592

Clarifying to others with the same doubt that I had. If you are wondering why the highlight is gone, you just need to apply to your template the below filter.

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

Upvotes: 1

domokun
domokun

Reputation: 3003

Thanks to @baba I've managed to solve both the main an the bonus issue.

Main Issue

In order to have your data correctly label even with different property names, you can specify multiple labels in the HTML

<div class="container-fluid" ng-controller="TypeaheadCtrl">
  <pre>Model: {{selected| json}}</pre>
  <input type="text" ng-model="selected" 
      typeahead="datum as (datum.name+datum.badname) for datum in data | filter:$viewValue | limitTo:8" 
      typeahead-template-url='tpl.html'>
</div>


This will display one or another, dependent on the data.
Problem is, if both are present, they will both be displayed...

That said, probably the best choice is to create a nicely formatted array for the typeahead, without messing with the code, just like @baba sugggested

Bonus Question

Using the match template, the issue is easily solved (for example) like this

tpl.html

    <a>
        {{match.label}}<br>
        {{match.model.role}}
    </a>

Just so.

Thx again guys

Upvotes: 4

Nikola Yovchev
Nikola Yovchev

Reputation: 10216

I edited your plunkr to answer your bonus question:

http://plnkr.co/edit/Yo4xBT?p=preview

Basically you can use the custom-template to do anything you want with the match.

For the main question, my purist nature would be to advise you to to modify the array to be consistent so you would have to search always in name. Just cause you can do so many things with angular doesn't mean that you should do them, so I am speaking from a purely software engineering perspective.

Edit: I like your json data.

Upvotes: 4

Related Questions