On-change not triggered when auto complete cleared

Hi,

I have a auto complete field (in red), and when the value changes I have two other fields (in blue) that also change.


But, when I clear the auto complete value, the on change event is not triggered.

It looks like auto complete handles the delete and backspace keys differently

Any suggestion?

Thank you!


(I am using Outsystems 10)

Hi, friend. 

I think that the values UF and Cidade keep the last value filled.

Have you put some rule to clear these fields as well?

Lenon Manhães wrote:

Hi, friend. 

I think that the values UF and Cidade keep the last value filled.

Have you put some rule to clear these fields as well?

Hi!

After your reply, I tried to make like this:


In the first assign I clear the fields "UF" and "Cidade", and in the second one I search for "UF" and "Cidade" according to the selected value in auto complete field.

But what happens is: when I debug, if I put some value in auto complete field, the On Change action is working fine. But, when I clear the value of auto complete field, the On Change action is not started :(

Hi Julia,


you need tp trigger action on backspace and delete keys.it is not trigger by default.


Regards

Rahul Sahu

Solution

Hi Julia,

I also encountered the same requirement multiple times while developing the web application and as mentioned in the previous comments you can achieve the required behavior by using some JavaScript code.

See the sample app

Steps:

1) Introduce an Expression widget within the screen (preferred - within the Footer placeholder

2) Set the Expression widget Escape Content Property to No

3) Define the below JavaScript code within the Expression widget

JS Code Snippet

"<script>
    function showList (event) {
        var KeyID = event.keyCode;
        var InputValue = $('#" + Input_Fruit.Id + "').val(); // getting the input widget value

        if (InputValue === '' && KeyID === 8) { // checking the BackSpace key press and InputValue (you can define additional precises conditions and checks)

            // simulating the double click event on the input widget
            var evt = new Event('dblclick');
            var button = document.getElementById('" + Input_Fruit.Id + "');
            button.dispatchEvent(evt); 
        }
    }
</script>"

Basically the above defined/mentioned JavaScript code is checking the BackSpace key press and the value of the input widget --> accordingly it is simulating the double click event on the respective input widget to showcase the complete autocomplete list on clearing the entire input widget text.

4) In the Extended Properties section of the Input widget call the showList function on the onkeyup event trigger as shown below

Let me know if you require the .oml solution file

Hope this helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Julia,

I also encountered the same requirement multiple times while developing the web application and as mentioned in the previous comments you can achieve the required behavior by using some JavaScript code.

See the sample app

Steps:

1) Introduce an Expression widget within the screen (preferred - within the Footer placeholder

2) Set the Expression widget Escape Content Property to No

3) Define the below JavaScript code within the Expression widget

JS Code Snippet

"<script>
    function showList (event) {
        var KeyID = event.keyCode;
        var InputValue = $('#" + Input_Fruit.Id + "').val(); // getting the input widget value

        if (InputValue === '' && KeyID === 8) { // checking the BackSpace key press and InputValue (you can define additional precises conditions and checks)

            // simulating the double click event on the input widget
            var evt = new Event('dblclick');
            var button = document.getElementById('" + Input_Fruit.Id + "');
            button.dispatchEvent(evt); 
        }
    }
</script>"

Basically the above defined/mentioned JavaScript code is checking the BackSpace key press and the value of the input widget --> accordingly it is simulating the double click event on the respective input widget to showcase the complete autocomplete list on clearing the entire input widget text.

4) In the Extended Properties section of the Input widget call the showList function on the onkeyup event trigger as shown below

Let me know if you require the .oml solution file

Hope this helps you!


Regards,

Benjith Sam

It worked perfectly!! Thank you so much

Julia Freitas wrote:

It worked perfectly!! Thank you so much

You are welcome, Julia :)

Glad I could be of help :)


Regards,

Benjith Sam