Clear selection before open popup

[Florian Mihalits]

Hello.

I´m using an autocomplete with a remote datasource.

When a user has already selected a value an clicks on the "open popup" button, the current selection is being sent to the server as the filter value (where) and thus only the selected value is being shown in the popup. 

Is there a way to clear the current selection when clicking on the open popup button before the current selection is being sent to the server?

What I want to achieve is, that a user can type in the autoselect field and get back only filtered values.
When a user clicks on the "open popup" button I want to show all options (limited by a certain number of results).

Is this possible and if, how?

All the best, 

Florian 

[Berly Christopher]

Hi Florian, 

  

Greetings from Syncfusion support. 

  

We would like to inform you that when you select one value from the AutoComplete component then the popup will be displayed the selected item alone. This is the default behaviour of the component.  

  

If you want to load the all data in the data source, then we need to clear the value from the input in the open event.  

  

open: function(args) { 

    this.value = null; 

  } 

 

  

Sample Link: https://stackblitz.com/edit/eafybv?file=index.ts  

  

Else, we suggest you to use our EJ2 ComboBox component that will displayed the all items in the data source when the value is selected in the input.  

  

Sample Link: https://ej2.syncfusion.com/demos/#/material/combo-box/data-binding.html  

  

UG Link: https://ej2.syncfusion.com/documentation/combo-box/data-binding/#binding-remote-data  

  

Regards, 

Berly B.C 

[Florian Mihalits]

Hello.

Thanks, I´ve been that far.

The problem is, one has to click twice to open the popup.

The fist click clears the selected item, then nothing happens.

The second click opens the popup.

Anything I can do about that?

All the best, 

Florian

[Berly Christopher]

Hi Florian, 

  

Sorry for the inconvenience caused. 

  

We would like to inform you that after clearing the value from the input the whole data will be updated in the popup on the close action. So, popup gets closed when clear the value in the open event.  

  

As we mentioned earlier, we suggest you to use our EJ2 ComboBox component that will help you to achieve the requested requirement. We have taken video demonstration for the requested requirement behaviour both in the AutoComplete and ComboBox component in below. 

  

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/302238614862393  

  

Sample Link: https://stackblitz.com/edit/eafybv-ezrj9a?file=index.html  

  

Regards, 

Berly B.C 

[Florian Mihalits]

Hello.

Using a combobox is not an option, because it preloads all the data.

I solved the problem this way:

...

htmlAttributes: { openhelper: "off"},

            open: function() {

                if (this.value !== null) {

                    this.value = null;

                    this.htmlAttributes["openhelper"] = "on";

                }

            },

            close: function() {

                if (this.value === null && this.htmlAttributes["openhelper"] === "on") {

                    this.showPopup();

                    this.htmlAttributes["openhelper"] = "off";

                }

            }

...

The htmlattribute "openhelper" is being used to track if a user clicks on "open" and then clicks on "close" without selecting a value.

In the open handler, I check if a selected value exists. If this is the case, I set the value to null (which causes CLOSE to be called) and I set the htmlattribute "openhelper" to ON.

In the close handler, I check if the current value is null and if the htmlattribute "openhelper" has been set to "ON". If this is the case, I show the popup.
If the htmlattribute "openhelper" is not set to "ON" the user has clicked on the close button without selecting an item. In that case I don´t call showpopup again.

Works pretty well.

It would be nice to have such a behavior of the autocomplete control natively available.

All the best, 

Florian

[Berly Christopher]

Hi Florian, 

  

We would like to inform you that, we can achieve the requested requirement as a work around solution and already implemented the ComboBox component based on this. So, we could not implement this requirement in the source level for the AutoComplete component. We suggest you to use the work around solution to achieve the requirement. 

  

Regards, 

Berly B.C