Autocomplete value as user type?

[halindra]

hello, since the google places autocomplete input doesn’t work for me (noapikey error, maybe because the API key keeps deleting itself) I’m trying to get an address input autocomplete to work with HEREWeGo API by querying the user typed value, BUT it seems that the value of an autocomplete input stays empty until an option is selected, yet again, I won’t have any option list until the typed value get passed to the query.

I read this but couldn’t get it to work:

Autocomplete - Using the typed value for inline flow

The autocomplete element has been updated to allow users to click a ‘no results found’ label to trigger events that may add to a list or send data to a server connect. If you’re using an inline flow for this, the value you need to pass isn’t in the picker but it’s simple to reference. Click on ‘code’ in the picker and use $event.value to get the string typed by the user [image]

any help is appreciated!

[TwitchBlade]

Hi @halindra, if I understand you correctly, you’re wanting the hidden value field to fill in with the typed value as the user types?

I’ve needed this and other more advanced features of the autocomplete field and off the top of my head I can think of two different ways to accomplish this.

Unfortunately I’m about to be driving for the next 7 hours and am on my phone so I can’t get into too much detail but one way would be to use jQuery and the other would be to build your own autocomplete field using various built in Wappler elements.

An example of jQuery would be something like

jQuery(‘body’).on(‘keydown’, ‘#id-of-visible-field’, function(){
jQuery(‘#id-of-hidden-field’).val(jQuery(this).val());
});

I chose to build my own autocomplete using a text field for the visible and hidden fields and a table that repeats a server connect query inside a collapse element. When the user starts to type in the visible field the collapse opens, the server connect filters by the visible field showing the results inside the collapse table. I then use the dynamic events to make the magic happen such as on keydown of the visible field, set the value of the hidden field to the value of the visible field, on key up with a tab modifier the value will be set to the first record in the list, on click of the row set the visible field to a column from the query, set the hidden field to a column from the query etc and so forth.

Hope that all makes sense. Again I’m on the road and can’t get on my computer to give a better example. I’m just trying to type all this from memory on my phone.

[halindra]

ah yes thanks for the idea. I managed to create one using a normal text input and collapsing list group. This might be a better approach for the long run since I can style it more than autocomplete input.

[bpj]

@halindra

noapikey error, maybe because the API key keeps deleting itself

What do you mean by this? Is this in Wappler? - I’d address this if I were you to get everything working as intended instead of trying to manipulate other ways of doing it.

In terms of the API call, if you want to use the Here API, add a API action to your page
Add a dynamic event to a text input that triggers the API call using the input’s value as a parameter (you may want to add a debounce to this)
In a fixed height container, add a row that has a repeat connected to the results of the API call. Each of the repeated rows can contain text/buttons etc. each with a dynamic event that triggers the completion of the selected address in another form.

I don’t think you can use the Wappler autocomplete option for a text input as the list is dynamically changing as the API call is completed and the API call can’t be made as an event as the ‘no results’ option has to be clicked to use the typed value. So either the technique above or some custom JS.