HTML Datalist
Web structure starts with solid HTML. Learn how HTML Datalist contributes to accessible and semantic web pages in the tutorial below.
Introduction
The concept of auto completion is likely recognized by most internet users. It involves providing suggestions when searching for an item or offering a list of recipients when entering an email address. Typically, this feature relies on JavaScript to function within web browsers. However, HTML 5 introduces a new capability that enables auto completion without the need for JavaScript. This article will explore the utilization of data lists in various contexts and delve into the restrictions associated with them.
Creating Datalists
Let's delve into understanding the functionality of a data list by examining a code snippet in a systematic manner:
<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team">
In the snippet above, the user inputs the team name of their favorite player. The user does not offer assistance for auto-completing the team name. By utilizing a data list, we can present a range of options for the user to choose from, enabling them to pick the correct choice. Let's offer recommendations using a data list.
<datalist>
<option>India</option>
<option>Afanistan</option>
<option>Bangladesh</option>
<option>Pakistan</option>
<!-- etc... -->
</datalist>
Following this, the browser will offer a suggestion if the user inputs an exact match. This concept can be grasped by finishing the provided code snippet.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team">
<datalist>
<option>India</option>
<option>Afanistan</option>
<option>Bangladesh</option>
<option>Pakistan</option>
</datalist>
</body>
</html>
Output:
Explanation:
Within the code snippet above, data lists have been included. If a user attempts to input information, the browser will offer a suggestion from the options if there is a precise match.
Additionally, each option element contains a value attribute. This attribute proves to be beneficial in cases where the user is uncertain about the association of a specific value with the option. Let's examine the provided code snippet.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="state">State:</label>
<input type="text" name="state" id="state" list="state_list">
<datalist id="state_list">
<option value="AL">Odisha</option>
<option value="AK">Karnataka</option>
<option value="AZ">New Delhi</option>
<option value="AR">bihar</option>
<!-- etc -->
</datalist>
</body>
</html>
Output:
Explanation:
Within the code snippet above, data lists have been included. If a user attempts to input a state name, the browser will offer suggestions based on an exact match from the state name.
The Autocomplete Attribute
Upon reviewing the results of both the first and second examples, it is evident that they exhibit a resemblance. Each browser employs distinct methods to retain the choices selected. These selections are subsequently utilized for facilitating auto-fill functionality. The upcoming illustration will demonstrate the activation of auto-fill feature for the browser.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!--
If the autocomplete Attribute is not specified, it inherits the value
of its parent form element. If not established, the
form's autocomplete Attribute default value is "on". Since neither this input nor its
structure has the Attribute specified, the "on" state will be used.
-->
<input type="text" name="firstName" placeholder="firstName">
<!--
The "on" state indicates that the browser can remember the value for future
use as well as suggest previously stored values.
-->
<input type="text" name="address" autocomplete="on" placeholder="address">
<!--
The "off" state tells the browser neither to store the value entered for
this input nor to suggest previously entered values. This should be
used if the data is sensitive or the deal will never be reused.
-->
<input type="text" name="secret" autocomplete="off" placeholder="secret">
</form>
</body>
</html>
Output:
Let's delve into distinguishing between the catalyst and autocomplete attributes. When the autocomplete attribute is utilized, the browser suggests options based on the user's prior input and retains the user's responses for subsequent use. On the other hand, by employing a datalist, the browser recommends options to the user.
Consider an instance where we disable the auto-complete feature and observe the resulting output.
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
This data list will never display in Opera because the autocomplete Attribute
is set to "off". It will show in all other supporting browsers.
-->
<input type="text" list="pets" autocomplete="off" placeholder="Enter the pet name: ">
<datalist id="pets">
<option>Mouse</option>
<option>Dog</option>
<option>Cat</option>
<option>Parrot</option>
</datalist>
</body>
</html>
Output:
Other Input Types
The auto-complete Attribute is applicable exclusively to textual input fields. With the introduction of HTML5, different input types can be specified for data lists. By setting the input type as range, a slider interface is generated for user input. By integrating this with a data list, suggestions within a range can be offered. An illustration of this concept will be demonstrated.
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="donation">Donation Amount (USD):</label>
<input type="range" name="donation" id="donation" list="donation_list"
step="5" min="5" max="500">
<datalist id="donation_list">
<option>25</option>
<option>50</option>
<option>200</option>
<option>400</option>
</datalist>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, a functionality has been implemented to enable users to input a donation amount by adjusting a slider bar.
When to Use a Datalist
To solicit user input recommended by the browser, we can utilize a data list. For instance, if we aim to provide a selection for users to pick their country from a list, we can implement the country options within a data list. Let's explore the process of integrating countries into a data list through an example.
Example 6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="country">Country:</label>
<input type="text" id="country" list="country_list">
<datalist id="country_list">
<option value="AF">India</option>
<option value="AX">?land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<!-- more -->
</datalist>
</body>
</html>
Output:
Enforcing a Value
The example above demonstrates that the datalist does not have the capability to enforce mandatory selection by the employee. However, we can accomplish this by utilizing the following API. This concept will be illustrated through an example.
<script>
//Here, we have to find all DOM inputs bound to a data list via their list attribute.
var inputs = document.querySelectorAll('input[list]');
for (var i = 0; i < inputs.length; i++) {
// When we want to change the value of the input ...
inputs[i].addEventListener('change', function() {
var optionFound = false,
datalist = this.list;
//This determines whether an option exists with the input's current value.
for (var j = 0; j < data list.options.length; j++) {
if (this.value == datalist.options[j].value) {
optionFound = true;
break;
}
}
//Use the setCustomValidity function of the Validation API
// to provide user feedback if the value does not exist in the datalist
if (optionFound) {
this.setCustomValidity('');
} else {
this.setCustomValidity('Please select a valid value.');
}
});
}
</script>
Output:
No output
Fallback to Alternate HTML Content
Certain browsers may lack support for the data list feature. Nevertheless, it is possible to present all child options even on such unsupported browsers. The following code snippet demonstrates how to achieve this functionality:
<select name="country">
<datalist id="country_list">
<option value="DZ">Algeria</option>
<option value="DZ">Algeria</option>
</datalist>
Example 7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="country">Country:</label>
<datalist id="country_list">
<select name="country">
<option value="AF">India</option>
<option value="AX">?land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<!-- more -->
</select>
If other, please specify:
</datalist>
<input type="text" name="country" id="country" list="country_list">
</body>
</html>
Output:
Explanation:
If the user cannot locate the suitable option in the provided code, they have the flexibility to manually choose a different option and input their information.
Limitations of Datalists
Datalist has various features. But it has some limitations. These are as follows:
- We can not change the data list display with the help of the CSS style property.
- Also, we can not change the position of the list.
- Also, we cannot count the type of the character before the browser displays the result.
- We also can not control what is considered a match (case sensitivity, match at the beginning of string vs. anywhere, and so on).
- We can not tie the input to a server-side data source.
