2

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

Community
  • 1
  • 1
domokun
  • 3,013
  • 3
  • 29
  • 55

3 Answers3

4

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.

Nikola Yovchev
  • 9,498
  • 4
  • 46
  • 72
  • Thx, that's very interesting! I've noticed that, for example, the highlighting on the fields is gone, which I presume is part of some sort of default template... Is there a place where I can find it to hack a bit into it? oh, btw, thx for the jsons :D – domokun Nov 27 '13 at 10:38
  • You can just examine the code of typehead or just use the default plugin and copy the styles into your template which is what I'd do. – Nikola Yovchev Nov 27 '13 at 10:46
  • Great! I've digged into the code and found a way to solve both the issues. I will reply very soon. Thank you very much for the help. – domokun Nov 27 '13 at 11:42
  • I was wondering, since the template it's just a couple of lines of HTML, I could copy what you've done in ui.bootstrap with the $templateCache module. I tried inserting `typeahead-template-url='typeahead-match.html'` and `$templateCache.put('typeahead-match.html', '...')` but it's only showing empty lines... Do you have any clue? – domokun Nov 27 '13 at 14:47
  • I am not a big user of $templateCache myself but I don't think it should be a problem to use it. If you console log the get in your controller, what do you get? – Nikola Yovchev Nov 27 '13 at 15:11
4

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

domokun
  • 3,013
  • 3
  • 29
  • 55
1

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>
Thiago C. S Ventura
  • 2,448
  • 1
  • 29
  • 43