Skip to content

Commit

Permalink
Merge pull request #447 from dannyhn/master
Browse files Browse the repository at this point in the history
Add option for custom search function
  • Loading branch information
softsimon authored Oct 24, 2018
2 parents 49166dd + 389a19f commit 21e7e7d
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 10 deletions.
5 changes: 5 additions & 0 deletions demo/src/app/dummy.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,9 @@ <h3>Dropdown Demo</h3>
With search and buttons:
<ss-multiselect-dropdown [options]="data.options" [settings]="settings" [ngModel]="data.selectedItems"></ss-multiselect-dropdown>
</p>

<p>
With custom prefix search and buttons:
<ss-multiselect-dropdown [options]="data.options" [settings]="settings" [ngModel]="data.selectedItems" [searchFunction]=prefixSearchFunction></ss-multiselect-dropdown>
</p>
</div>
4 changes: 4 additions & 0 deletions demo/src/app/dummy.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,8 @@ export class DummyComponent {
showCheckAll: true,
showUncheckAll: true
};

prefixSearchFunction(str: string): RegExp {
return new RegExp('^' + str, 'i');
}
}
10 changes: 9 additions & 1 deletion src/dropdown/dropdown.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export class MultiselectDropdownComponent
@Input() texts: IMultiSelectTexts;
@Input() disabled: boolean = false;
@Input() disabledSelection: boolean = false;
@Input() searchFunction: (str: string) => RegExp = this._escapeRegExp;

@Output() selectionLimitReached = new EventEmitter();
@Output() dropdownClosed = new EventEmitter();
Expand Down Expand Up @@ -277,7 +278,8 @@ export class MultiselectDropdownComponent
options,
value,
this.settings.searchMaxLimit,
this.settings.searchMaxRenderedItems
this.settings.searchMaxRenderedItems,
this.searchFunction
);
}

Expand Down Expand Up @@ -709,4 +711,10 @@ export class MultiselectDropdownComponent
e.stopPropagation();
}
}

private _escapeRegExp(str: string): RegExp {
const regExpStr = str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
return new RegExp(regExpStr, 'i');
}

}
14 changes: 5 additions & 9 deletions src/dropdown/search-filter.pipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export class MultiSelectSearchFilter implements PipeTransform {
options: IMultiSelectOption[],
str = '',
limit = 0,
renderLimit = 0
renderLimit = 0,
searchFunction: (str: string) => RegExp,
): IMultiSelectOption[] {
str = str.toLowerCase();

Expand All @@ -34,7 +35,7 @@ export class MultiSelectSearchFilter implements PipeTransform {

const filteredOpts = this._searchCache.hasOwnProperty(str)
? this._searchCache[str]
: this._doSearch(options, str, limit);
: this._doSearch(options, str, limit, searchFunction);

const isUnderLimit = options.length <= limit;

Expand All @@ -61,7 +62,7 @@ export class MultiSelectSearchFilter implements PipeTransform {
return options;
}

private _doSearch(options: IMultiSelectOption[], str: string, limit: number) {
private _doSearch(options: IMultiSelectOption[], str: string, limit: number, searchFunction: (str: string) => RegExp) {
const prevStr = str.slice(0, -1);
const prevResults = this._searchCache[prevStr];
const prevResultShift = this._prevSkippedItems[prevStr] || 0;
Expand All @@ -72,7 +73,7 @@ export class MultiSelectSearchFilter implements PipeTransform {

const optsLength = options.length;
const maxFound = limit > 0 ? Math.min(limit, optsLength) : optsLength;
const regexp = new RegExp(this._escapeRegExp(str), 'i');
const regexp = searchFunction(str);
const filteredOpts: IMultiSelectOption[] = [];

let i = 0, founded = 0, removedFromPrevResult = 0;
Expand Down Expand Up @@ -127,9 +128,4 @@ export class MultiSelectSearchFilter implements PipeTransform {
private _limitRenderedItems<T>(items: T[], limit: number): T[] {
return items.length > limit && limit > 0 ? items.slice(0, limit) : items;
}

private _escapeRegExp(str: string): string {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

}

0 comments on commit 21e7e7d

Please sign in to comment.