How to dynamically create HTML input containing datalist using jQuery?

Question

I have a HTML datalist that looks like this

<input type="text" list="cars" /> 
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>

Now I have a cars list

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi']

Now I want to create the input field and datalist and fill it dynamically using jquery. So basically I want to create the above html snippet dynamically using jquery.

So this is what I do

 var carInput = document.createElement("input");
 carInput.type="text";
 carInput.list="cars";
 carInput.id = "carName"
 var carDatalist = document.createElement("datalist");
 carDatalist.id="cars";

 $.each(carsList, function(i, item) {
        $("#cars").append($("<option>").attr('value', i).text(item));
 });

But it only creates the input element and not the datalist element with it. What am I doing wrong?

EDIT: I want to create an independent html since I only want to use it on sweetalert2 popup and take input from the user.

This is what I show to the user. The popup only shows the input fieled but not the dropdown.

swal({
      title: 'Select a car name or define one',
      html: carInput,
      showCancelButton: true,
      width: '500px', 
      });

It looks like you're trying to select the cars element from the page, but you haven't appended it to the page yet. Replace $('#cars') with the variable for the datalist you just created. — Taplar
– Taplar, Commented Jan 8, 2020 at 16:00
@Taplar I do not have much idea about datalist. I am assuming $("#cars") is the id for the datalist? So I target that. and fill it up. — Souvik Ray
– Souvik Ray, Commented Jan 8, 2020 at 16:05
You're missing the point. $(<selector>) is going to look for matching elements in the DOM. As you have not appended the datalist you just made to the DOM yet, it will not find it. Further more, since you already have the variable with a reference to it, trying to find it is pointless. — Taplar
– Taplar, Commented Jan 8, 2020 at 16:06
carDatalist.innerHTML += '...yourhtml...' or $(carDatalist).append(... — Taplar
– Taplar, Commented Jan 8, 2020 at 16:08
@Taplar I understand I am looking for something in the DOM and it doesn't exists. But in this case, I want to only look in the html I created dynamically. I have updated the question. Please check. — Souvik Ray
– Souvik Ray, Commented Jan 8, 2020 at 16:19

Ahed Kabalan · Accepted Answer · 2020-01-08 18:51:45Z

1

Created a template hidden div in order to be in DOM and then clone it with datalist appended:

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi'];

$(".tmp").find("#cars").html("");
$.each(carsList, function(i, item) {
    $(".tmp").find("#cars").append($("<option>").attr('value', i).text(item));
});

var div = $(".tmp").clone().show();

Swal.fire({
  title: 'Select a car name or define one',
  html: div,
  showCancelButton: true,
  width: '500px', 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<div class="tmp" style="display: none;">
    <input type="text" list="cars" /> 
    <datalist id="cars">
    </datalist>
</div>

answered Jan 8, 2020 at 18:51

Ahed Kabalan

8536 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Souvik Ray Over a year ago

Great! This works. So the trick to define a basic structure in the DOM and manipulate that using jquery. But can you explain why did we do $(".tmp").clone().show(); ?

Ahed Kabalan Over a year ago

Since the tmp div is hidden, I don't need to be visible. I prefer to clone it and then remove display: none and add the cloned to Swal's html.

Souvik Ray Over a year ago

brilliant! Never thought about that. Thanks again!

Collectives™ on Stack Overflow

How to dynamically create HTML input containing datalist using jQuery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related