HTML Datalist

Introduction

All the web users may be familiar with the term auro completion. When searching for an item, the search item should suggest it. Also, when we enter an email address, the mail offers the recipient list. This functionality is not working in the web browser without the help of JavaScript. But with a new feature available in HTML 5, it is possible without the support of JavaScript. In this article, we are going to learn about the data list and the use of data lists in different scenarios. Also, we are going to study its limitations.

Creating Datalists

To know about the work of data list, let's take a code snippet step by step:

<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team">

The user provides their favourite player's team name in the above snippet. The user does not provide additional help to auto-complete the team name. But with the help of a data list, we can provide the list of options so that the user can select the appropriate option. Let's provide suggestions with the help of a data list.

<datalist>
<option>India</option>
<option>Afanistan</option>
<option>Bangladesh</option>
<option>Pakistan</option>
<!-- etc... -->
</datalist>

After this, the browser will suggest the option if the user enters an exact match. Let us understand this by completing the code.

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:

In the above code, we have provided some data lists. When the user tries to enter something, if there is an exact match, the browser suggests this from the option.

Also, there is a value attribute for all the option elements. This is helpful when the user does not know which value is not associated with the given value option. Let's consider the following code.

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:

In the above code, we have provided some data lists. When the user tries to enter the state name, if there is an exact match, the browser suggests this from the state name.

The Autocomplete Attribute

If we see the output of examples one and two, we find that the results look similar. All the browsers have different mechanisms to store the option. These options are used later for auto-completion. In the following example, we will enable the auto-completion 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:

So, let's understand the difference between the catalyst and autocomplete attributes. After using the auto-complete Attribute, the browser provides the option based on the user's previous input. Also, it stores the user response for future use. But with the help of a datalist, the browser suggests the user's option.

Let's take an example where we set the auto-complete option as off and see the output of it.

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

We can use the auto-complete Attribute only for the textual input. However, we can provide various input types for the data list after's coming of HTML5. If we set the input type as range, then it will create a slider for the user input. If we combine this with the data list, we can also suggest points in a range. Let us see this by taking an example.

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:

In the above code, we have created a slide by which the user can enter the donation amount by sliding the bar.

When to Use a Datalist

When we require input suggested by the browser to the user, then at that point, we can use a data list. Suppose we want to create an option where the user can select their country from the option from the data list. Let's see how to implement the country in the data list by 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 above example shows that the datalist can not force the employee to select the mandatory option. But we can achieve this by providing the below API. Let us see this by taking 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

Some of the browsers don't support the data list. But we can still display all the child options on that unsupported browser. With the help of the below code, we can display the unsupported data on the browser. Let's see the code:

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:

In the above code, if the user does not find the appropriate option, they can manually select another option and enter their details.

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.

Next TopicWeb 2.0

← prev next →