Cannot search label text when label is built using a template

[sgmccli]

Hi

Thanks for a great library! I've run into an issue when trying to filter a select field that has had its options and labels created using templates. This is detailed below.

Expected behaviour

The input field looks as follows

<ng-select [items]="lists"
           placeholder="Type to search"
           [markFirst]=true
           [(ngModel)]="selectedList"
           [searchable]="true"
           (change)="onSelectedList($event)">
  <ng-template ng-label-tmp let-item="item">
    <figure class="image vis-avatar">
      <img [src]="item.avatarUrl">
    </figure>
    <span class="permission-name">
      {{item.owner}}/{{item.name}}
    </span>
  </ng-template>

  <ng-template ng-option-tmp let-item="item">
    <figure class="image vis-avatar">
      <img [src]="item.avatarUrl">
    </figure>
    <span class="permission-name">
      {{item.owner}}/{{item.name}}
    </span>
  </ng-template>
</ng-select>

An example might look like this

sgmccli / test

When I search I expect to be able to type sgmccli or test and filter the results accordingly.

Actual behaviour

The actual behaviour is that no values are returned at all. Having stepped through the filter code, it appears that if BindLabel is not set, the default property name of 'label' is being used. This property does not exist on my object and so no results are filtered.

If templates are being used for labels, we should be searching against the template text contents and not a single field on the underlying item.

More Info

ng-select version: 0.12.0

browser: Chrome 64

reproducible in demo page: [YES/NO]

[varnastadeus]

Hi, by default items are filtered using bindLabel value, so you can set it to single property of your object. If you have more complex use case, you can use typehead and get the search term. After that you can apply any filtering logic you want.
For now I recommend you solving it using typehead.

Other than that, we will consider implementing one of these features:

1. Get the properties from ng-label-tmp and filter by them. This might be complicated, since there is no easy way of figuring out which properties to skip, e.g. item.avatarUrl might be irrelevant
2. Allow to build label from multiple properties

[sgmccli]

Hi @varnastadeus,

Thanks for the info, I'll look at the typeahead technique.

Of the options you have listed, I think 2. is the one I was looking for. As you have correctly pointed out I would not be interested in filtering based on the avatarUrl property. Providing a mechanism for structuring labels would be great - a form of template string should do it.

Thanks again

Simon

[varnastadeus]

Adding note: could be implemented adding array of searchable keys eg.: searchableFields