API Content Displaying Issues

I’ve got an API connection that works by displaying a group that is hidden on page load once the field is filled in:

When you input a value and hit SEARCH, it displays the hidden group which contains the API text:

I’ve got the group containing the data to RESET when INPUT changes but it gives some wierd output until the user completely removes the text and clicks off the input. In other words, the group isn’t resetting unless the user changes data+clicks off the input box.

If the user hits backspace a few times it produces a long string because the API call keeps running with the new data and the group is still being displayed:

How do i initiate a change/reset the group upon 1st instance of any part of the input data being changed without the user having to click OFF the input?

How about when you click search, you set a custom state to the value of the input - the one that displays the correct data. Then, have visibility conditions for the group: when input value is empty or input value is not custom state value > not visible. So every time you change the input, it’ll hide the group until you click Search again with a new value and change the custom state.

Try that?


Gaby | Coaching Bubble

Still seems you must click OFF the input field in order for the state change to take effect… Which is the issue.

If it was instant I could simply hide the group when there are under 4 characters in the input for example but as soon as i go to 2 or 3 characters, the api data is still there containing wonky data.

Oh right right. Ok, so I did this on a button element and it’s not as instant as you’d probably like, but it does work… the button hides once it recognizes number of characters has changed and this is all while keeping focus:

1 Like