On-change not triggered when auto complete cleared
Question

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)

mvp_badge
MVP
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

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

mvp_badge
MVP

Julia Freitas wrote:

It worked perfectly!! Thank you so much

You are welcome, Julia :)

Glad I could be of help :)


Regards,

Benjith Sam

Hello Benjith Sam,

How I can implement this code in React?

Thanks in advance


mvp_badge
MVP

Hi Paulo, 

Sorry for the late response. We don't have any in-built autocomplete widgets/actions available for Reactive Web application development.

Available alternate options

Refer to this link for similiar pattern widget: autocomplete-widget-missing-in-reactive

Refer to this Forge Component: Reactive AutoComplete Forge Component


I hope this helps you!


Kind regards,

Benjith Sam

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 :(

mvp_badge
MVP

Hi Julia,


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


Regards

Rahul Sahu

mvp_badge
MVP
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

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

mvp_badge
MVP

Julia Freitas wrote:

It worked perfectly!! Thank you so much

You are welcome, Julia :)

Glad I could be of help :)


Regards,

Benjith Sam

Hello Benjith Sam,

How I can implement this code in React?

Thanks in advance


mvp_badge
MVP

Hi Paulo, 

Sorry for the late response. We don't have any in-built autocomplete widgets/actions available for Reactive Web application development.

Available alternate options

Refer to this link for similiar pattern widget: autocomplete-widget-missing-in-reactive

Refer to this Forge Component: Reactive AutoComplete Forge Component


I hope this helps you!


Kind regards,

Benjith Sam

Hi @Benjith Sam

Would you mind sharing the OML for the Sample app? i've tried this solution in traditional web but i cant seem to make it work. Thanks!

Regars,
Ian

mvp_badge
MVP

Hi @Ian Gregorio,

Sure, please refer to the attached sample .oml file.


Kind regards,

Benjith Sam

SampleAppAutoCompleteDemo.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.