Autocomplete using Javascript - How is the value passed

Question

I am learning to do autocomplete using Javascript.

This is the example code I am using, it works, I need to understand the flow of it.

When you enter JO in the input tag, the option for 'john doe' is shown

// variables
var input = document.querySelector('#autocomplete-input');
var people = ['john doe', 'maria', 'paul', 'george', 'jimmy'];
var results;

// functions
function autocomplete(val) {
  var people_return = [];

  for (i = 0; i < people.length; i++) {
     if (val === people[i].slice(0, val.length)) {
      people_return.push(people[i]);

    }
  }

  return people_return;
}

// events
input.onkeyup = function(e) {
  input_val = this.value; 

  if (input_val.length > 0) {
    var people_to_show = [];
    autocomplete_results = document.getElementById("autocomplete-results");
    autocomplete_results.innerHTML = '';
    people_to_show = autocomplete(input_val); 
    
    for (i = 0; i < people_to_show.length; i++) {
      autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';

    }
    autocomplete_results.style.display = 'block';
  } else {
    people_to_show = [];
    autocomplete_results.innerHTML = '';
  }
}

<div id="autocomplete-container">  
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input"></input>
  <ul id="autocomplete-results">
  </ul>
</div>

My questions are: (this is to understand the flow - I'm new to Javascript)

• input_val is not declared as variable, but still gets the value - How
• first onkeyup value has to go to autocomplete function and then to come back to it with the array matching the criteria. - How is this done

I have attached an image with the flow - remarks in red is how I understood the flow, the one's in blue are the answer's I'm looking for.

Answer 1

If you assign a value to a variable that hasn't been declared, it will automatically become a global variable.

As for the autocomplete function, it gets called via:

people_to_show = autocomplete(input_val);

The return value from autocomplete() is the value that gets assigned to people_to_show

input_val comes from this.value where this is the input element. The e passed into the function is not used by the code, though you could use it like e.target.value. As the event gets passed in anyway, you can use event.target.value. See my code where I've removed the e.

results is not used in your code

// variables
var input = document.querySelector('#autocomplete-input');
var people = ['john doe', 'maria', 'paul', 'george', 'jimmy'];
var results;

// functions
function autocomplete(val) {
  var people_return = [];

  for (i = 0; i < people.length; i++) {
     if (val === people[i].slice(0, val.length)) {
      people_return.push(people[i]);

    }
  }

  return people_return;
}

// events
input.onkeyup = function() {
  input_val = event.target.value; 

  if (input_val.length > 0) {
    var people_to_show = [];
    autocomplete_results = document.getElementById("autocomplete-results");
    autocomplete_results.innerHTML = '';
    people_to_show = autocomplete(input_val); 
    
    for (i = 0; i < people_to_show.length; i++) {
      autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';

    }
    autocomplete_results.style.display = 'block';
  } else {
    people_to_show = [];
    autocomplete_results.innerHTML = '';
  }
}

<div id="autocomplete-container">  
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input"></input>
  <ul id="autocomplete-results">
  </ul>
</div>