Building a dynamic datalist from a database, Part 1

If you don't know what a datalist is, it is essentially a way to tie a list of options (like you would have in an HTML "select" element) to a single-line text input. With the "select" element, you are restricted to only the options contained in the select options list. With a "datalist", you can free-form type into the field and if a match is found in your datalist then that option will be chosen. This is a great way to allow new entries to be created in an existing database field without creating duplicates. With the traditional select element, you would not be able to create new entries. Here is how Mozilla demonstrates the structure for a datalist:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Your input field has a "list" parameter which matches to the "datalist" id parameter. As long as those two match, you have a functioning datalist.

But what if you had a LARGE list of options from a database, like the list of every possible city in every state. You wouldn't want to necessarily build that datalist from database every time you load the page. You would want it to be something dynamic. Something that would limit the number of results and make your data use lean. You could create an experience where every time your user types a key, a new limited list of choices would be provided based on the input provided, reducing the round trip data from your database. You would progressively reduce the number of options with every keystroke. You could add an event listener to your input field, probably something like "oninput" or "onkeyup" - I've used both and haven't found really a difference when to choose one over the other. You can add the event listener with a script block or you can just make it inline in the element definition itself.

before:
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

after:
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" oninput="myFunction(this)"/>

Now we've added the "oninput" event listener, and we've pointed it to a "myFunction" function, and we are passing the "this" value to the function as an argument. The myFunction function will be updating the datalist and the function will have to know what element to update - "this" will tell the function, by way of the "oninput" event, which datalist to update. Now we need to build the myFunction function:

function myFunction(el){
   console.log(el)
}

For now, we're just going to get the oninput event listener to fire and give us a console output to show us what happens when we create input into the text input field. In Part 2, we will flesh out the "myFunction" function to do some cool background connecting to a database to pull the rest of the ice cream flavors. That coconut flavor looks pretty enticing. I'm going to have to find me some of that!