How to display the dropdown as soon as a user click on an autocomplete?

Wappler General Need Help
1

Hi, I’m using an autocomplete and I want:

  1. the user to be able to see the full list of value when autocomplete value is empty
  2. the user to be able to see the fitlered list when focus out of the input and come back

Curently the main issue is that the autocomplete doesn’t show a list when you click on it.

I’ve try to use dmx-on:click on the div but it doesn’t work I need to use a parent. And I can’t find a method on the autocomplete to show the list (there is “only” focus, validate, setValue, and disabled).

If someone have an idea or a lead?

2

Autocomplete, as I’m sure you’re finding, isn’t currently designed to do this but I think it would be possible. The simplest method I often use is a help text to say ‘type space to see full list’ (follow step 1 below)

The following process should work, in principal, but there is an issue. Setting the value of the text box (dummy that you type into) cannot seemingly be done it sets the value of the hidden field that has the resulting value. @patrick can we get access to the typed field on autocomplete?

  1. You need to make sure that values have a space in them. I have lists of names where I know there is a space between first name and surname but other times where single words are possible. If single words can be present, add a space to the end of the text binding for the autocomplete.
    e.g.
optiontext="listtext+' '"
  1. Use the dynamic on focus event to set the value to ’ ’
dmx-on:focus="text1.setValue(' ')"
  1. Then on update use an inline flow so that the string is left trimmed if the value != ’ ’
    image
    image804×220 9.47 KB

    Add a condition for value != ' ' the use a run step to set the value of the input to value.trimLeft()
    e.g.
dmx-on:updated="run({condition:{if:`value != \' \'`,then:{steps:{run:{action:`text1.setValue(value.trimLeft())`}}}}})"
1 Like
3

It doesn't trigger on my autocomplete, on which node you put it?

4

See my note to patrick - the issue is that we can currently only set the value of the hidden value field, not the typed field.

1 Like
5

Yeah but you did make it work on your side no?

6

No. It needs some work from the team (or custom JS) to do what you want

1 Like
7

I’m looking in je JS of the autocomplete right now to find something, will see

1 Like
8

I’ve edit directly the component as I don’t another solution for now:

dmxAutocomplete.zip (2.4 KB)

The idea:

  1. in render add a this.input.addEventListener('focus', this.onInput.bind(this))
  2. in onInput edit this if to bypass with a true: if (this.closeList(), true) {
  3. In showList I removed the first check so it’s displayed even if input.value is empty
2 Likes
9

I’m sure you know, but keep a copy as it may well get overwritten with updates.