The input box in the DATALIST:HTML5 automatically prompts the treasure device

The role of DataList is to enter the input box in your input information, according to the letter you hit, automatically display a hint of the following list, very much like Baidu or Google's search box automatic hints, in the air Ticket Train ticket Search page also has this effect. It is a very useful addition to the HTML5 element.

DataList's performance is much like a drop- Select down list, but it's just a hint and doesn't restrict what the user enters in the input box. HTML5 DataList syntax is almost exactly the same as the syntax of a drop- select down list, very simple!

<labelFor="Country_name"> Countries:</label><inputId="Country_name"Name="Country_name"Type=The text"List="Country"/><datalistId="Country"><optionValue="Afghanistan Afghanistan"><optionValue="Albania Albanian"><optionValue="Algeria Algeria ">  <option value< Span class= "token punctuation" >= "Andorra Andorra " Span class= "token punctuation" >>  <option value< Span class= "token punctuation" >= "Angola Angola " > </datalist>         

It is important to note that the value of the input box's list property is datalist the ID, so that datalist it can be associated with the input box, which was mentioned earlier when the range type was introduced. datalistdoes not display itself, it is displayed automatically only when it needs to mate with input inputs.

Let's look at a practical example, in the following input box, enter a few letters, DataList will prompt you to include these characters in the English country name.

Country name (English)

If your browser is too old to see the effect above, this image below will allow you to take a look at the eye addiction.

This example is in English, but Chinese is actually the same. You might as well try it out automatically. Very simple, before this effect basically can only use to speak JavaScript implementation, need you have quite JavaScript basic skills, and now, thanks to HTML5, only need pure HTML can achieve such magical effect.

DataList and Javasript also have some short boards, such as when the amount of data is very large, such as thousands of information, so that the amount of data should not be all written to the page, the use of JavaScript dynamic loading will improve efficiency. But for ordinary applications, the DataList is fully sufficient. What do you think?