feat: highlight search term in labels in dropdown list #233
Conversation
benjaminlefevre
force-pushed
the
highlight_search_term
branch
from
3f0aebe
to
57ad5f0
Compare
benjaminlefevre
force-pushed
the
highlight_search_term
branch
from
57ad5f0
to
59af579
Compare
| @@ -53,7 +53,7 @@ | |||
| [class.marked]="item === itemsList.markedItem"> | |||
|
|
|||
| <ng-template #defaultOptionTemplate> | |||
| <span class="ng-option-label" [innerHTML]="item.label"></span> | |||
| <span class="ng-option-label" [innerHTML]="item.highlightedLabel"></span> | |||
There was a problem hiding this comment.
This approach is limited to default filter only and will not work if using custom [typeahead]. It would be better to create directive [ngOptionHighlight]="filterValue" which would be responsible for highlighting label.
<span [ngOptionHighlight]="filterValue" class="ng-option-label" [innerHTML]="item.label"></span>Also users will be able to apply this directive even if they are using custom option templates.
There was a problem hiding this comment.
Yep good idea, done.
src/ng-select/items-list.ts
Outdated
| }; | ||
| } | ||
|
|
||
| private _highlightLabelWithSearchTerm(option: NgOption, term: string, indexOfTerm: number) { | ||
| if (indexOfTerm > -1 && !option.selected && !option.disabled) { |
There was a problem hiding this comment.
It seems to add unneeded characters in some cases.
There was a problem hiding this comment.
fixed the end index was wrong on the third substring
benjaminlefevre
force-pushed
the
highlight_search_term
branch
from
0d05e54
to
fde53f7
Compare
|
@anjmao thanks for the review. I fixed the bug (mistake on substring ;) the end index is not included :p) And tried to make what you said: make a directive. I fixed also a bug discovered during my tests (https://ng-select.github.io/ng-select#/data-sources : console error log when trying to filter on the object array (true, 'Two', 3). |
benjaminlefevre
force-pushed
the
highlight_search_term
branch
from
fde53f7
to
f7f5ace
Compare
… it also (demos have been updated)
benjaminlefevre
force-pushed
the
highlight_search_term
branch
from
f7f5ace
to
ac23f6d
Compare
| @Directive({ | ||
| selector: '[ngOptionHighlight]' | ||
| }) | ||
| export class NgOptionHighlightDirective implements OnChanges { |
There was a problem hiding this comment.
Looks nice, only add some unit tests for this directive and I can merge it. You can create new test file called ng-option-highlight.directive.spec.ts.
There was a problem hiding this comment.
No problem I will add some unit tests tonight
|
Just add unit test for the directive |
#152
highlight search term in the items with a default style 'hightlight' (bold and underline text)