How to best capture input text as it's being typed? (type-ahead search)

Need help App Organization
1

Hi gang. I have what I suspect is a common need and I’m struggling with the best way to execute.

  • I have a site header containing an input field named SEARCH
  • I have a custom state on my site header named QUERY
  • I want to update QUERY whenever/as the value of SEARCH changes
  • Ideally, I want to update QUERY without the user having to click enter/tab/button-click

Example scenario:

  1. page loads, SEARCH is empty
  2. user clicks into SEARCH field, types “F”
  3. state QUERY is updated from empty, now = “F”
  4. user continues typing, adds an “a”
  5. state QUERY updates again, new value = “Fa”
    etc until QUERY = “Fargo”

I’ll stop there. How would YOU do this? What combination of workflow(s) would you implement to achieve the above? Thanks!!!

1 Like
2

This should be pretty direct with 2 steps in workflows for “inputs value changed”. But maybe I’m not getting the whole picture?

Set the workflow on your input to clear the state, then update the state according to the current value in the input.

when input is updated:
1.) set statee: QUERY value = QUERY value - QUERY value
2.) set state: QUERY value = input’s value

3

thanks @zach8 . The problems I’m running into are these:

  1. When I create a workflow based on Elements > “an input’s value has changed” - it does NOT fire until I hit tab/enter. The simple act of typing “F” does not trigger the workflow.
  2. If I instead create an identical workflow based on General > “do when condition is true” and I make my Only When condition that INPUT’s value is not empty: this worflow DOES fire immediately after I type “F” but subsequent letters “argo” do NOT re-fire the same workflow. The result is that if I slowly type “Fargo” my state’s query remains with a value of “F” until/unless I hit enter/tab. (And I have the workflow set to “Every Time”)
4

You could probably modify that workflow with “do when condition is true”. Make the workflow count how many characters are in the input, and then make it update the state when the count changes?

Alternatively: maybe a search input solves this better than a text input? If users are searching for entries in your DB, the search input may simplify everything.

2 Likes
5

@zach8 thanks for the suggestion! I now have it working.

Interestingly, while the “when input # of chars > 0” workflow would only fire once, when I changed it to compare input’s length to the length of the custom state, it fires every time/with every keystroke. I then added a less-than workflow as well, in case someone hits backspace. And a clearing one too - though this may be unnecessary. Will have to test.

abc
abc500×620 46.4 KB

Thanks again!

3 Likes
6

For sure dude! Mark it solved on your post so folks will know the solution is in here!

2 Likes
7

I’m not sure if anything changed since this solution was posted, but today it seems it’ll trigger only once too, like the other conditions mentioned earlier in this thread

1 Like
8

Same thing here

9

about to do this same thing, would love to know if this solution is legit, but i guess i gotta try it lol