A standout amongst the most utilized Javascript gadgets over the previous decade has been the content box autocomplete gadget. Each Javascript structure has their own particular autocomplete gadget and a considerable lot of them have gotten to be truly praiseworthy. Much like the placeholder first experience with markup, an every now and again utilized usefulness has been moved from a Javascript-just utility to HTML through the new DATALIST component.
<datalist> …. </datalist>
The HTML <datalist> Element holds a set of <option> elements that speak to the qualities accessible for different controls.
The <datalist> tag defines an arrangement of predefined choices for an input component.
The <datalist> tag is utilized to give an “autocomplete” offer on input components. Clients will see a drop-down arrangement of predefined choices as they input information.
You can utilize the input component’s schedule ascribe to tie it together with a datalist component.
Here is the Syntax for DATALIST Element
Supported Browser
1
2
3
4
5
|
< datalist > Â Â Â Â Â Â Â Â < option value = "option value" > </ datalist > |
Below is complete syntax along with example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html> < html > Â Â Â Â Â Â Â Â < head > Â Â Â Â Â Â Â Â Â < title >Title name will go here</ title > Â Â Â Â </ head > Â Â Â Â Â Â Â Â < body > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â < input list = "country" > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â < datalist id = "country" > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â < option value = "India" > Â Â Â Â Â Â Â Â Â Â Â Â < option value = "Australia" > Â Â Â Â Â Â Â Â Â Â Â Â < option value = "Sourth Africa" > Â Â Â Â Â Â Â Â Â Â Â Â < option value = "Canada" > Â Â Â Â Â Â Â Â Â Â Â Â < option value = "America" > Â Â Â Â Â Â Â Â </ datalist > Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â < input type = "submit" value = "submit" /> Â Â Â Â Â Â Â Â Â Â Â Â </ body > Â Â Â Â </ html > |