Link to show and hide content with jQuery

With the introduction of HTML5 the programming world, a range of new tools were provided to increase the chances of achieving a better structured and semantic web development. Many of these new elements were focused on improving the management of forms , the most interesting item found to datalist .

Datalist label, is a concept introduced by this version of the language, to define a list of options that we can present the user’s choice. Usually when we make a form, use the select element to delimit the answers you can give a user, presenting a list of options and thus avoid having wrong answers. When a case where we need to make choices without limiting the user enters is where datalist.

If we relate the list defined by datalist, with a text input element type, we can modify the default behavior and have it display a set of suggestions when the user enters some character.The behavior we get is something that can be seen in many places today, but until now it was only possible to do using JavaScript as a complement.

Use of the label

As we said the datalist element consists of a list, and as such we define to use it. Inside the tag we must establish a set of options, similar to what we do with the select element, with the difference that it is not a datalist element having independent control therefore is used in complement with one input.

A simple definition would be as follows:

?
1
2
3
4
5
6
7
8
9
10
11
< label > Tell us your favorite color: </ label >
< input type = "text" id = "color_favorito" list = "colors" />
< datalist id = "color" >
    < option value = "Blue" />
    < option value = "Yellow" />
    < option value = "Red" />
    < option value = "Green" />
    < option value = "Black" />
    < option value = "White" />
    < option value = "Orange" />
</ datalist >

As seen in the code, we use a simple input text type, which has an attribute that is called “list”. This attribute is used to tell the browser what to load when the user enters a value in the box on the form. To achieve this ratio, the value of the attribute list must match the id of the datalist element containing the list of values ​​for that field or suggestions.

Depues the input element, we define the list with the datalist element, this will consist of a set of elements of type option . Each of these options will be shown when we enter the letter box match your initial letter. As we add more characters to the box, the list will be refined until it is the option that most closely matches what you are writing.

Unfortunately the result may vary from browser to browser, but generally you’ll get a similar result as you can see in the Google page.

Worth mentioning that the datalist element, can be used with other types of input, not just text.Based on what it tells us the W3C , this kind of lists can be used to type url, telephone, color and date .

Add more attributes

We can take things to a level below and use the label attribute to complement the structure of the suggestions. However, we must be cautious with the use of this attribute, as the result we get looks different in browsers, there are even some browsers that only show the added value in this attribute, as in the case of Firefox.

If we use the two attributes, both value and label, keep in mind that Opera will filter based on two attributes, Firefox uses the label to display the value of the suggestion and Chrome ignore the value of the label to bring results.

?
1
2
3
4
5
6
7
8
9
10
11
< label > Tell us your favorite color: </ label >
< input type = "text" id = "color_favorito" list = "colors" />
< datalist id = "color" >
    < option value = "Blue" label = "like heaven" />
    < option value = "Yellow" label = "like the Sun" />
    < option value = "Red" label = "like blood" />
    < option value = "Green" label = "fields as" />
    < option value = "Black" label = "as coal" />
    < option value = "White" label = "the purity" />
    < option value = "Orange" label = "as citric" />
</ datalist >

Support

As we have seen the datalist element is still in a standardized way, that’s why for obvious reasonsis not supported by all browsers. If you are willing to give support to older browsers, completely forget to use this tag, or instead offers an alternative to the user when entering from an older version.

While it is not necessary to offer an alternative, since older browsers simply ignore the datalist element and no extra functionality is performed, as a council we say, it is better to give similar functionality, so you can ensure that the usability of the site will the same for all cases.Alternatively this item can make use of jQuery autocomplete .

This element is currently supported by most modern browsers in their latest versions. Internet Explorer supports it since version 10, since Firefox 4, Chrome and Opera also offer support, however Safari yet.

Leave a Comment