Forum Discussion

TimSlater-6e888's avatar
TimSlater-6e888
Community Member
4 months ago
Solved

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 Obje...
  • Nedim's avatar
    Nedim
    4 months ago

    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.