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.
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.