I have a ng-select component whose drop-down items look like this image above.
In an attempt to filter the list, I type in characters into the input control and see this: "No Items Found" despite the fact they are in the list.
Here's what I've done to try to figure this out...
Within the component's own code, there is this filter function. I have found based on setting breakpoints, that there is no searchFn (according to code flow) so the defaultSearchFn is used but doesn't seem to work.
// Code within the component
filter(term) {
if (!term) {
this.resetFilteredItems();
return;
}
this._filteredItems = [];
term = this._ngSelect.searchFn ? term : stripSpecialChars(term).toLocaleLowerCase();
/** @type {?} */
const match = this._ngSelect.searchFn || this._defaultSearchFn;
/** @type {?} */
const hideSelected = this._ngSelect.hideSelected;
//Because there are no groups keys....
for (const key of Array.from(this._groups.keys())) {
/** @type {?} */
const matchedItems = [];
for (const item of this._groups.get(key)) {
if (hideSelected && (item.parent && item.parent.selected || item.selected)) {
continue;
}
/** @type {?} */
const searchItem = this._ngSelect.searchFn ? item.value : item;
//match is never called
if (match(term, searchItem)) {
matchedItems.push(item);
}
}
//code just skips to this point.
if (matchedItems.length > 0) {
const [last] = matchedItems.slice(-1);
if (last.parent) {
/** @type {?} */
const head = this._items.find(x => x === last.parent);
this._filteredItems.push(head);
}
this._filteredItems.push(...matchedItems);
}
}
}
So no items are found because the itemslist.filteredItems is always null.
<ng-select
#select
(change)="onSelectChanged(select)"
[(items)]="items"
[searchable]="true"
type="text"
>
<ng-template ng-label-tmp let-item="item">
<span class="dropdown">
{{ item.firstName + " " + item.lastName }}
</span>
</ng-template>
<ng-template
ng-option-tmp
let-item="item"
let-search="searchTerm"
let-index="index"
>
<span class="dropdown"
>{{
item.firstName +
" " +
item.lastName +
" " +
item.middleName +
" " +
"(" +
item.id +
")"
}}
</span>
</ng-template>
</ng-select>
Here's the HTML, have I forgot something to make the filtering work when characters are typed in?

