Forum Discussion
Updating a text variable from a Text Entry box without losing focus
I had this working in a previous version using some basic Javascript but it seems to have broken now. I have tried ChatGPT for help but it seems to indicate it isn't possible without using a Web Object.
I want to have a text entry box the learner types in. I want to use the value of the variable associated with that text entry field to perform some action based on the "live" value of the variable, without the text entry field having to lose focus/the learner having to click outside of it. So the variable updates as they type, not when they click outside the box.
For example. The learner is typing in a search box, as they type, Storyline is assessing whether what they have typed matches a set criteria so it can emulate autocomplete. So say the learner types "to" into the search box, "tofu" could pop up as an option. Or if they type "veg" into the search box, "vegetables" would appear.
I want to solely use JavaScript for this and not Web Objects.
Is this possible?
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.
3 Replies
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.