Creating a HTML5 datalist on the fly

Question

I'm trying to create a datalist on they fly and attach it to an existing input element. But nothing happens (no dropdown arrow is shown) jQuery would be acceptable, too.

var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

function fillDataList() {
    var container = document.getElementById('my-text-box'),
    i = 0,
    len = optionList.length,
    dl = document.createElement('datalist');

    dl.id = 'dlCities';
    for (; i < len; i += 1) {
        var option = document.createElement('option');
        option.value = optionList[i];
        dl.appendChild(option);
    }
    container.appendChild(dl);
}

Fiddle: https://jsfiddle.net/tomsx/704cxako/

(Example taken from this site: http://blogs.microsoft.co.il/gilf/2012/07/30/quick-tip-autocomplete-using-html5-datalist-element/ )

Mamun · Accepted Answer · 2018-09-19T04:10:36.763

You have to set the input element's list property as the id of the datalist:

<input id="my-text-box" list="dlCities"/>

Working Code Example:

var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

function fillDataList() {
    var container = document.getElementById('my-text-box'),
    i = 0,
    len = optionList.length,
    dl = document.createElement('datalist');

    dl.id = 'dlCities';
    for (; i < len; i += 1) {
        var option = document.createElement('option');
        option.value = optionList[i];
        dl.appendChild(option);
    }
    container.appendChild(dl);
}
fillDataList();

<input id="my-text-box" list="dlCities"/>

OR: If you do not want to modify the HTML, you can use Element.setAttribute() to set the attribute in JavaScript:

container.setAttribute('list','dlCities');

var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

function fillDataList() {
    var container = document.getElementById('my-text-box'),
    i = 0,
    len = optionList.length,
    dl = document.createElement('datalist');
    container.setAttribute('list','dlCities'); // Set the attribute here

    dl.id = 'dlCities';
    for (; i < len; i += 1) {
        var option = document.createElement('option');
        option.value = optionList[i];
        dl.appendChild(option);
    }
    container.appendChild(dl);
}
fillDataList();

<input id="my-text-box"/>

I can't modify the html code (existing website). Therefore I need to add the list attribute by code. setAttribute() doesn't work for me: https://jsfiddle.net/tomsx/704cxako/48/ — smolo, Sep 19 '18 at 04:10
Thanks mate. It works now. It looks like addEventListener() didn't work. I just removed it. — smolo, Sep 19 '18 at 04:15
when the input tag is greater than 600px the option doesn't match the input width — dragonn, Jun 16 '21 at 17:31

score 3 · Answer 2 · answered Sep 19 '18 at 04:05

3

With only the input present when the page is loaded :

notice how I use "input.setAttribute('list','datalist')" and not "input.list = 'datalist' " directly.

var datalist = document.createElement('datalist');
datalist.id = "datalist";
document.body.appendChild(datalist);
["Seattle", "Las Vegas", "New York", "Salt lake City"].forEach(function(data) {
  var option = document.createElement('option')
  option.value = data
  datalist.appendChild(option)
});
document.querySelector('#my-text-box').setAttribute('list', "datalist");

<input id='my-text-box' />

answered Sep 19 '18 at 04:05

mpm

20,148
7
50
55

Nice solution, and even shorter :) – smolo Sep 19 '18 at 04:22
Works great with `setAttribute`. Why it's not working with directly `input.list = 'datalist' ? – robert Feb 08 '20 at 21:59

score 1 · Answer 3 · answered Sep 19 '18 at 03:58

try below solution using jquery on change of input text its appending options.

$(document).ready(function() {
 $("#search").on("input", function(e) {
  var val = $(this).val();
  if(val === "") return;
   var arr = ['apple','banana','google','code','microsoft'];
   var dataList = $("#searchresults");
   dataList.empty();
   if(arr.length) {
    for(var i=0, len=arr.length; i<len; i++) {
     var opt = $("<option></option>").attr("value", arr[i]);
     dataList.append(opt);
    }
   }

 });
});

<!doctype html>
<html>
<head>
<title>Example 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<p>
 <input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off" />
 <datalist id="searchresults"></datalist>
</p>

</body>
</html>

score 0 · Answer 4 · answered Sep 19 '18 at 04:05

JS

    var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

    function fillDataList() {

        var container = document.getElementById('my-text-box'),
        i = 0,
        len = optionList.length,
        dl = document.createElement('datalist');

        dl.id = 'dlCities';
        for (; i < len; i += 1) {
            var option = document.createElement('option');
            option.value = optionList[i];
            dl.appendChild(option);
        }
        container.appendChild(dl);
    }

fillDataList();

HTML

<input id="my-text-box" list='dlCities'>

Creating a HTML5 datalist on the fly

4 Answers4

Linked