Firing dropdown using external button and overwriting search method

[aks1994]

Hi, thanks for making this component.

Just have two questions:

1. Is it possible to fire the dropdown using an external button? When I click on the external button, I want the dropdown to open automatically and the cursor to be positioned on the search

2. I was hoping to use a more dynamic search method, for example ('dy ea' should return 'dynamic search' as a result). Basically you don't need to enter a single search term. I have my own implementation of this search but am not sure how I can overwrite the existing search. I think I can use the (typed) event to start filtering the list, but it still uses default search so limits the results that are shown

[optimistex]

Hi, thanks for making this component.

You are welcome! I glad that it is useful for you.

---

Is it possible to fire the dropdown using an external button? When I click on the external button, I want the dropdown to open automatically and the cursor to be positioned on the search

Currently, no, it is not. But, check the comment and vote for if it is okay for you: #32 (comment)

---

I was hoping to use a more dynamic search method, for example ('dy ea' should return 'dynamic search' as a result). Basically you don't need to enter a single search term. I have my own implementation of this search but am not sure how I can overwrite the existing search. I think I can use the (typed) event to start filtering the list, but it still uses default search so limits the results that are shown

It seems we have to add an external callback for custom filtering the search.
Something like a [searchCallback] which waiting for the function:

   @Input() searchCallback: (search: string, source: string) => boolean;

[aks1994]

Currently, no, it is not. But, check the comment and vote for if it is okay for you: #32 (comment)

Okay I will vote. Yes, making the optionsOpen() and optionsClose() public would be very helpful

It seems we have to add an external callback for custom filtering the search.
Something like a [searchCallback] which waiting for the function:

@Input() searchCallback: (search: string, source: string) => boolean;

Yes, this would be great if possible. Can I request this feature?

[optimistex]

Do not close the thread. It is like a little task for me.
When I'll have a free time I'll do it.

[aks1994]

Okay, that was accidental. Reopened.

Thanks, really appreciate it!

[optimistex]

All that is you ask seems does not difficult for implementation.
And. I did it but did not test.
For details check the commit: 72adfd1

Install: npm i ngx-select-ex@dev

Please keep in touch and let me know how it works.

[aks1994]

Ok great, that was fast! Thanks, I will test it out in the next day or so and let you know.

[aks1994]

So I've been testing both changes, and overall they are working well. Thanks again for the quick help!

Just a couple notes/questions:

1. For optionsOpen(), I am able to access it now. However, if I am using an external toggle, it does not work because I think it also registers the document click and auto closes it. On examining the DOM elements, that's what seems to be happening - the options html shows and gets removed instantaneously. The (open) event is also fired. I can still use this new functionality if I want the options to show by default on ngOnInit, but I would like to hide the ngx-select component entirely and only show it upon a button (and open as default). So any suggestions there?

2. For search, it is working as expected and I am able to overwrite the default search fine. In your current implementation, the matching characters are in bold and I'm not sure if we will be able to maintain the same functionality for the new search. Currently, if I use my search, the bold effect will work as long as the option was in the search results of the default search as well. Eg: For 'abc def', the 'ab' will be highlighted if search term is 'ab', but if I search 'ab de', this will still have 'abc def' in my search results. But no characters will be bold because this would not have been an option in the default search. I think that it might be tricky to get the characters bold if search is overwritten, so my suggestion is to have the bold option entirely disabled if search has been overwritten.

[optimistex]

For optionsOpen(), I am able to access it now. However, if I am using an external toggle, it does not work because I think it also registers the document click and auto closes it. On examining the DOM elements, that's what seems to be happening - the options html shows and gets removed instantaneously. The (open) event is also fired. I can still use this new functionality if I want the options to show by default on ngOnInit, but I would like to hide the ngx-select component entirely and only show it upon a button (and open as default). So any suggestions there?

Bad but fast solution:

setTimeout(() => this.ngxSelect.optionsOpen(), 0);

Later I'll figure out how to do it better.

[optimistex]

For search, it is working as expected and I am able to overwrite the default search fine. In your current implementation, the matching characters are in bold and I'm not sure if we will be able to maintain the same functionality for the new search. Currently, if I use my search, the bold effect will work as long as the option was in the search results of the default search as well. Eg: For 'abc def', the 'ab' will be highlighted if search term is 'ab', but if I search 'ab de', this will still have 'abc def' in my search results. But no characters will be bold because this would not have been an option in the default search. I think that it might be tricky to get the characters bold if search is overwritten, so my suggestion is to have the bold option entirely disabled if search has been overwritten.

We need to figure out how to take it out:

ngx-select-ex/src/app/lib/ngx-select/ngx-select.classes.ts

Lines 28 to 30 in c594c42

	this.cacheRenderedText = sanitizer.bypassSecurityTrustHtml(this.text.replace(
	new RegExp(escapeString(this.cacheHighlightText), 'gi'), '<strong>$&</strong>'
	));

The code called from there:

ngx-select-ex/src/app/lib/ngx-select/ngx-select.component.ts

Lines 363 to 366 in c594c42

	if (this.inputElRef) {
	return option.renderText(this.sanitizer, this.inputElRef.nativeElement.value);
	}
	return option.renderText(this.sanitizer, '');