Forum Discussion
Updating a text variable from a Text Entry box without losing focus
See the attached .story file. It’s the example I mentioned above. You can include as many words as you like in the words array.
const words = ["vegetables", "fruits", "animals", "celebrities"];This part of code adds an event listener to a text input field that listens for user input. Every time the input changes (as the user types), it triggers a function that:
- Retrieves the input's current value (this.value)
- Converts it to lowercase (toLowerCase())
input.addEventListener('input', function () { const val = this.value.toLowerCase();Additional conditions:
const match = words.find(word => word.startsWith(val)); if (val.length >= 3 && match) { setVar("autocomplete", match); } else { setVar("autocomplete", ""); }Explore and modify as you like.
It is possible, but it does require some planning and well-defined criteria to avoid unnecessary effort. If you can create a mockup with clearly outlined conditions, that would be very helpful.
In the example below, I tried to simulate the behavior you described. The TextEntry variable updates as you type and emulates an autocomplete effect based on a predefined words array. It begins suggesting once the third correct letter of a word is entered and resets if the typed letters don’t follow the correct order. Is this close to what you had in mind?
Hi Nedim
Thanks for taking the time to reply. That's exactly what I was looking for, can you share how you achieved the "live" update of the text entry variable to display in your Typed text area. Thanks!
See the attached .story file. It’s the example I mentioned above. You can include as many words as you like in the words array.
const words = ["vegetables", "fruits", "animals", "celebrities"];This part of code adds an event listener to a text input field that listens for user input. Every time the input changes (as the user types), it triggers a function that:
- Retrieves the input's current value (this.value)
- Converts it to lowercase (toLowerCase())
input.addEventListener('input', function () { const val = this.value.toLowerCase();Additional conditions:
const match = words.find(word => word.startsWith(val)); if (val.length >= 3 && match) { setVar("autocomplete", match); } else { setVar("autocomplete", ""); }Explore and modify as you like.