The following gif should show the problem in action.

Typeahead seems to trigger the onChange function before actually setting the value from a click, for who knows what reason.

As you can see whatever is typed into the box is grabbed correctly, but if a user selects an option from the dropdown only what had been typed in up to that point is grabbed, rather than the appropriate behavior which is the value in the text-box.

The TypeAhead JS code looks like

$('#typeahead_id').typeahead({
    name: 'typeahead',
    remote: 'search.php?key=%QUERY,
    limit: 10
});

And the html for the input

<label>Team Name:</label>
<input type='text' id='typeahead_id' onChange='update_params("team",typeahead_id)' class='typeahead tt-query' autocomplete='on' spellcheck='false' placeholder='Select Team'><br>`;

The update Param method

function update_params(val, id) {
   let temp = nodes[id]
   temp.params[val] = $("#" + val + id).val()
   console.log(temp)
}

The oddness of this can be explained in that each of the blue boxes is referred to as a node, and can have their own unique typeahead.

I need a way in that users can type the name of the team into the input or select one from the dropdown and my code should be able to retrieve that value and set it in the appropriate spot.