Datalist : Inserting options from JavaScript array

We will prepare a datalist without any option or data added to it.

<input name="month" list="months" >
<datalist id="months" >
</datalist>

We will use one array to store months of a year and then add them as option to the datalist. We will loop through all the elements of the array and prepare the format to store the options in a string variable by using all elements.

var str=''; // variable to store the options
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
for (var i=0; i < month.length;++i){
str += '<option value="'+month[i]+'" />'; // Storing options in variable
}

Then we will assign this string variable to the datalist by using innnerHTML property.

var my_list=document.getElementById("months");
my_list.innerHTML = str;

Each element of our array will be added as option values of the datalist.

The output is here .

Full code is here

<input name="month" list="months" >
<datalist id="months" >
</datalist>

<script language="javascript">
var str=''; // variable to store the options
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
for (var i=0; i < month.length;++i){
str += '<option value="'+month[i]+'" />'; // Storing options in variable
}
var my_list=document.getElementById("months");
my_list.innerHTML = str;
</script>

Number of options available in a Datalist

var my_list=document.getElementById("months");

alert(my_list.options.length);

Output will be 12

Displaying particular option value.

alert(my_list.options[5].value);

Output will be June ( Note : options[0].value is January )

Adding options from MySQL table.

Here we have seen how to add options to a datalist by using client side JavaScript. We can populate options of a datalist by taking data from database table by using PHP and Ajax.

We can use events connected to input element.

<input name="month" list="months" onchange='my_alert()'>

function my_alert()
{
alert('I am changed');
}

Questions

What is the purpose of the `<datalist>` element in JavaScript?
How do I create a dropdown list of options using the `<datalist>` element?
Can I populate the options of a `<datalist>` dynamically using JavaScript?
How can I associate a `<datalist>` with an input field for autocomplete functionality?
Is it possible to customize the appearance of the dropdown list in a `<datalist>`?
What events can I listen to when a user interacts with a `<datalist>`?
Can I add additional attributes or data to each option in a `<datalist>`?
How can I access the selected value from a `<datalist>` in JavaScript?
Are there any browser compatibility issues to consider when using the `<datalist>` element?
What are some best practices for designing and implementing `<datalist>` elements in JavaScript?

Subscribe to our YouTube Channel here

	23-08-2021
how to get data-id in option like these ? i am triyng make input with data-* attribute for insert to my db values from table (users)

	17-08-2022
I m trying to populate datalist dynamically with Ajax call. all the options gets populated when i check in source code. But actually UI shows only first option in datalist dropdown. Why is this?

Adding options to a datalist.

Number of options available in a Datalist

Displaying particular option value.

Adding options from MySQL table.

Questions

Subscribe