Autocomplete compotent text without id display or other methods possible?

Wappler General Need Help
, , ,
1

Hello community,

I’m stuck for a long time with one thing I cannot solve, AI also run out of suggestions in this case. As I understand autocomplete component has a hard limit on this. What I want to achieve is to have a text input field that suggest autocomplete list and should work this way:

  1. If user types and gets suggested text from the DB (that has a value) and clicks on it then it stays - this works perfect with autocomplete - no issues here;
  2. If the user types and gets no suggestions then his typed text should be stored to the DB and then loaded from the DB . For autocomplete component this is probably a hard limit and I do not find a way to handle this.

In my example I want a user to be able to select specialty from the list or input his own if no suggestions is there. For this goal I use specialty_id and specialty_text and .json saves either the specialty_text or specialty_id. But the issue is when I try to load specialty_text from the DB to autocomplete it does not show up, I’ve tried using search/text input fields, mixing them but then I get no suggestions and so on.

I’m using a datastore to save those values and these specialties are inside a modal’s repeat children, the component iself code:

              <input id="autocomplete_specialty" name="specialty_text" class="form-control" is="dmx-autocomplete" placeholder="įrašykite arba pasirinkite" dmx-bind:data="conn_values.data.query_specialty" optiontext="specialty" noclear="true" noresultslabel="" dmx-on:changed="ds_educations.update({$id: $value.$id},{specialty_text: value, specialty_id: value.match(/^\\d+$/)?value.toNumber():null})" data-rule-pattern="^(\[A-Za-zĄČĘĖĮŠŲŪŽąčęėįšųūž\\- \]+|\\d+)$" data-msg-pattern="Neleidžiami simboliai" type="search" optionsearch="specialty" dmx-bind:value="specialty_text" dmx-on:blur="ds_educations.update({$id: $value.$id},{specialty_text: value, specialty_id: value.match(/^\\d+$/)?value.toNumber():null})" optionvalue="specialty_id" >

server response when loading existing values looks like this:

  1. For an autocomplete where specialty_id had a value (record in the DB) and selected from autocomplete it works and display correctly:
            "specialty_id": null,
            "specialty_text": "1",

 

2. For an autocompelte where specialty_id had no value (no record in the DB) so specialty_text was inserted in the DB does not display it in the autocomplete component:
                "specialty_id": null,
                "specialty_text": "geras",

Payload array when sending the value that is inside the DB (specialty_id):

"specialty_id":null,"specialty_text":"3"

Payload array when sending only specialty_text that has no specialty_id in the DB:

"specialty_id":null,"specialty_text":"geras" - this text also dissapears when leaving the the fild (no clear is checked).

2

In seem to recall, many years ago (2016?), before Wappler had an autocomplete component, leveraging the html "datalist" to do something similar. Sorry, cant recall exact details but may be worth looking into.

3

I’ve tried to achieve this with datalist and also couldn’t whith the way I need it to work. Any other thoughts?

4

Yes, we had to build this exact functionality. We got it to eventually work with autocomplete (both fetch existing values OR accept wildcard values) with a bit of trial and error BUT it never could work right on mobile devices (iphone Safari specifically).

We eventually scrapped the autocomplete and built or own version from scratch:

  1. use a simply input field. Add a hidden row with a nested table beneath it (or repeat region of rows)
  2. on value change of the input field, run a serverconnect fetch of any matches to populate the repeat region/table of possible choices.
  3. Wire up a button within the repeat region that, on click, registers the users selection of that index (you can either bury a repeating form within the repeat rows/ table, or have the button pipe the selected values to a hidden form to run the user submission
  4. Mimic the functionality to the input field itself in case the user hits “enter”
  5. Alter whatever serverconnect you route to for the POST to accept both known ID’s as well as wildcards: if the input text isn’t found in DB, inject it
  6. After your form post, clear the user’s input

Works fine this way across all devices and browsers.

5

Thank you, I finally achieved this by having autocomplete component + text input field hidden and if there are no numeric value then autocomplete is hidden and text input is used but if there is only a numeric value then autocomplete is used and text input is hidden.

If would be nice to have autocomplete component with a setting for that, because now it’s a hard limit of autocomplete component. @George Future component expansion would be nice if possible.

1 Like
7

if this is what you mean, it is possible with a page flow configured correctly (in my case i used an inline flow with wait time for server connects up&down. no hidden inputs involved.).

1 Like