Home / FAQs / Input Form Field Suggestions with HTML and JavaScript

Input Form Field Suggestions with HTML and JavaScript

FAQs

January 3, 2023 0

Last updated: January 5, 2023.

You can add suggested values to a HTML input as a user types using HTML only.

Define a <datalist> and set each suggested input as an <option> within it.

Then cite the id of <datalist> and make set it to the value of the list attribute on an <input> element:

<label for="user-browser">Enter the name of your preferred browser:</label><br>
<input type="text" id="users-browser" list="browsers">

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Edge"></option>
</datalist>

But you may not always want to hardcode the suggested values in HTML like in the above example.

Instead, you can use JavaScript to populate the option elements with fetched data.

In the below, a fetch request is made to a countries GitHub repository. The returned data is used to populate the <datalist> element with country options:

<label for="user-county">Enter your country name:</label><br>
<input type="text" id="user-country" list="countries">

<datalist id="countries"></datalist>

<script>

fetch('https://raw.githubusercontent.com/mledoze/countries/master/countries.json')
  .then(res => res.json())
  .then(data => handler(data))
// Fetches countries data in json format from countries GitHub repository

function handler(data) {

  const dataList = document.querySelector('#countries');
  // Gets datalist

  data.forEach(arrayObject => {
  // Iterates through array of objects of user data
    
    const option = document.createElement('option');
    // Creates new option element

    option.value = arrayObject.name.common;
    // Sets the value of value attribute to common country name

    dataList.appendChild(option);
    // Appends option inside datalist element

  });

}
</script>

If you want to force the user to select an option from the available options, you can search for the value of an <option> element whose value attribute is the same as the user input value:

<label for="user-country">What country are you from?</label><br>
<input type="text" id="user-country" list="countries"><br>
<button onclick="validate()">Submit</button>

<datalist id="countries"></datalist>

<script>

const input = document.getElementById('user-country');
const datalist = document.getElementById('countries');

function validate() {
  const selected = document.querySelector(`#countries > option[value="${input.value}"]`);
  // Checks for option with value attribute identical the same as user input

  if (selected && selected.value.length > 0) {
    alert("Valid"); // Runs if check for option does not return null and input > 0
  } else {
    alert("Invalid"); // Runs if option is null (user entered a non-suggested value
  }
}

fetch('https://raw.githubusercontent.com/mledoze/countries/master/countries.json')
  .then(res => res.json())
  .then(data => handler(data))

function handler(data) {

  const dataList = document.querySelector('#countries');

  data.forEach(arrayObject => {
    const option = document.createElement('option');
    option.value = arrayObject.name.common;
    dataList.appendChild(option);
  });

}
</script>

Input Form Field Suggestions with HTML and JavaScript

Related posts

Related Posts: