Autocomplete: dmx-bind

Wappler General How To
#1

Hello Guys,

I have an autocomplete where I have to set its ID as dynamic ID:

<input 
   is="dmx-autocomplete" 
   dmx-bind:id="tag_search_{{internal_name}}_{{inclusion_field_id}}_{{var_control_id.value}}" 
   dmx-bind:inclusion_field_id="{{inclusion_field_id}}" 
   class="form-control mb-2"
   id="inp_multi_sub" 
   name="multi" 
   dmx-bind:name="{{internal_name}}" 
   dmx-bind:data="option_list.split(&quot;,&quot;)" 
   optiontext="$value" 
   optionvalue="$value"
   dmx-on:updated="array.addUniq(value);inp_multi_sub.setValue('\'\'')" 
   placeholder="Start type...">

But the dmx-bind is not working. If I remove is=autocomplete, binding works.
How to deal with autocomplete dynamic IDs?Am I doing something wrong?

I’m using node.js + postgres.

Thanks for your time!

#2

I don’t see any issues in this HTML.
But I don’t understand where the inclusion and name bindings are coming from? Is this inside a repeat?

Also, what do you mean by binding is not working? Lastly, just for debugging purposes, did you try to create a simple autocomplete without any of tye custom bindings?

#3

Hey @sid!

Yes, this is inside of a repeat and dmx-bind:id is working for others fields (input, radio, check, dropdown) but not for autocomplete.

I created a new page, a variable with a random value (abc) and an autocomplete field, with dmx-bind:id="{{variable.value}}". When inspecting the element, the autocomplete id is id={{variable.value}} not id=abc.

If you remove “is=autocomplete”, the dmx-bind:id works!

#4

I don’t think i’ve used dynamic ID on autocomplete field before. So could be a bug.
Will check when on desk.

Meanwhile, one more test if you can do… Set the dynamic id to a regular string, without any expressions… Does it work then?

#5

Hey @sid!

Did the test, this is from Chrome DevTools inspection:

<input is="dmx-autocomplete" dmx-bind:id="tag_search" dmx-bind:inclusion_field_id="{{inclusion_field_id}}" class="form-control mb-2" dmx-bind:name="{{internal_name}}" placeholder="Start type..." autocomplete="off" form="dummy" value="">

The dmx-bind is not recognized!
@patrick @Teodor this can be a bug?

#6

Finally got around to testing this on my machine too. It does look like the dmx-bind bindings are not getting resolved for autocomplete input field. Something for the team to check.

1 Like
#7

Thanks @sid lets wait @patrick and @teodor :smiley:

#8

guys, sorry for ask one more time: is this a bug or dmx-autocomplete doesn’t allow set dmx-bind?
@patrick @Teodor @George

#9

Bump

#10

same here, any tips @Teodor?

#11

Due to the nature of the component, it does not currently support dynamic attributes.
We’ll see how to improve this in the future.

2 Likes
#12

Thanks @Teodor, any suggestion for an workaround?

#13

What exactly your issue is - how are you using this field’s value? Inside the same repeat scope or outside ?

#14

Yes, it is inside of a repeat.

In this app, all the fields are dynamic, the user creates rules and the app show the fields accordingly to the user rules, I need the identify each field with different IDs in order to show or hide fields via javascript. Autocomplete field is one of these fields.

#15

Well if you need to use it inside the same repeat scope, then you can use the static ID there like autocomplete1.value

#16

Cool…will try! thanks!

#17

Hello @Teodor, any chance to have an ETA for this?

#18

You didn’t really answer my question:

As you can:

#19

@Teodor! I answered you! Check the above messages!

Well if you need to use it inside the same repeat scope, then you can use the static ID there like autocomplete1.value

It did not work for my use case. There are many controls based on the user’s rules, for the autocomplete, for example, I’m using it as a “tag and search”…user search a value and the result selected I stored inside of an array and then show the selected values as tags/buttons. When the user press “save”, I need to validate the presence of values for required fields and I’m doing it via javascript (fields are required only if the admin user select the field as required), I would like to have the dmx-bind ID for the autocomplete only to display a red border in case of not having a value in a required field. I tried to use Wappler validation, but having the “required” dynamic, didn’t found a “Wappler way” to accomplish it.

I found a workaround but would be nice to have this or even a “required” validation with conditions.

#20

I don’t really understand what exactly are you trying to achieve. As I explained if you need to use its value in the same repeat scope dynamic id is not needed.
Currently it’s not possible to have dynamic attributes for the autocomplete. And I don’t have a timeframe for when will this be possible.