Javatpoint Logo
Javatpoint Logo

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:

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.

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:

Output:

HTML Datalist

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:

Output:

HTML Datalist

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:

Output:

HTML Datalist

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:

Output:

HTML Datalist

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:

Output:

HTML Datalist

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:

Output:

HTML Datalist

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.

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:

Output:

HTML Datalist

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





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA




news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news
news