Create Autocomplete from Javascript

Hello Wapplers,

I have a form with 1 auto-complete and 2 dropdowns, when the user clicks in “+ Location”, all the red area in the image below should be rendered every time the user clicks on the button.

I created a javascript function with:

var autocomplete = document.createElement("div");
autocomplete.innerHTML = (auto-complete html generated by wappler)
container.appendChild(autocomplete);

It is creating the element, but the autocomplete is not working. I tried to reload the SC and the autocomplete js file via javascript as well but still not working.

Briefly, I need to create an autocomplete field via javascript, is this possible? Or do you, guys, have an alternative to accomplish this task? Should I use createElement instead of innerHTML?

"

Thanks!

@patrick can you help me?

Is this form adding the location to a DB via Server Connect and then adding the created id to an array?

Showing the +Location form can be achieved by using a variable which you toggle between 1 and 0 - 1 to show the form, 0 to hide it. The form would have a dmx-show=“variablename.value”

Make the form a Server Connect one and have an success dynamic event that adds the inserted id to the array and sets the variable value back to 0 to hide the form.

1 Like

App Connect doesn’t detect changes in the DOM, so it doesn’t know you entered content there that needs to be rendered. We don’t have an api for this situation, what you can try is calling dmx.app.$parse(autocomplete), but can’t promise you that will work.

1 Like

Thanks, @bpj! The problem is to render autocomplete dynamically and put it to work!

Thanks, @patrick! I tried dmx.app.$parse(autocomplete) after the appendChild, but the options list to autocomplete from is empty.

1 Like