Input Form Field Suggestions with HTML and JavaScript
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>
Related posts
- Check if a HTML input element contains (no) user input
- How to manipulate HTML5 element attributes using JavaScript
- Using fetch to make GET, POST, PUT and DELETE requests
- Save user form input data in a JavaScript object
- Get checked checkbox values only from HTML form with JavaScript