Load SC on input interaction (e.g. click)

Wappler General How To
#1

Hey all,

I have a large simple list in a DB table that I don’t want to load on page load - so I have turned off auto load.

I’d like to then load this list as soon as the user interacts with the autocomplete input via a dynamic event. I’ve tried:

Input - Select
Input - Focus
Mouse - Click

None load the list for it to then be searched via the input. As soon as I turn off the No Auto Load - the list is then searchable.

Any recommendations on what dynamic event I should use to achieve this?

#2

You need to add the onChange dynamic event to your input field.

#3

I don’t see an onChange option - and I need to load the list before they try and change the info in the input - as it’s an autocomplete

#4

So you are using the same SC for your autocomplete and your results?

#5

I have a SC that queries the full table list, that I’d like to call upon for the user to search through only when they click on the input field. The SC will then load, and the user can then search the list.

Then when they choose the option inautocomplete - I then use a different SC to add that value to a new join table.

So the flow is this:

  1. Page load - SC does not load
  2. User clicks on input (because they want to search) - SC loads and presents user with the AutoComplete functinality.
  3. User chooses autocomplete option and clicks add
  4. new SC adds this value to a new join table.

What I’m stuck on is the dynamic event to load the SC that presents the autocomplete option list.

#6

You can try hiding your results and use the dynamic attribute Show when the input field has a value?

Do you have a link to what you are doing that we can see?

#7

hmm this isn’t the issue i’m having.

I have a massive list that I’m querying with a SC - I am just trying to avoid loading that list on page load, instead trigger the load when a user clicks on the input - I just need to know what dynamic event is the correct one to load the SC on the page.

#8

I’m not sure I follow. So when you have no load selected the autocomplete doesn’t work either? Are you using the same SC for both the dynamic autocomplete and the results? If you are using the no load you will have to use two different server connects. One that loads (for autocomplete) and one that doesn’t (for results).

#9

I think you could usually do what @brad suggests - add the event to the input field. However, I don’t think you can in this case because a different input field is created dynamcially when the auto-complete feature is used. You could add the event to some element containing the object - eg an onclick event which would load the SC. You would probably want to cache the data to avoid it being reloaded again (eg whenever the relevant area was clicked or the page reloaded).

#10

Thank you both, I got it working.

The onClick event didn’t work on the input itself, but when I put the onClick event on the column that the input was contained within, it loaded the SC - which then gives the user the ability to search - and saves on page load.

Thank you both for your help.

Matt

1 Like