如何使用 jQuery 动态创建包含数据列表的 HTML 输入？

Question

我有一个 HTML datalist 看起来像这样

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

现在我有一个cars list

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

现在我想创建 input field 和 datalist 并使用 jquery 动态填充它。所以基本上我想使用 jquery.

动态创建上面的 html 片段

所以这就是我所做的

 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));
 });

但它只创建 input 元素而不是 datalist 元素。我做错了什么？

编辑： 我想创建一个独立的 html 因为我只想在 sweetalert2 弹出窗口中使用它并接受用户的输入。

这是我展示给用户的。弹出窗口仅显示 input 字段但不显示 dropdown.

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

Answer 1

创建了一个隐藏的模板 div 以便在 DOM 中，然后克隆它并附加数据列表：

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/sweetalert2@9.5.4/dist/sweetalert2.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@9.5.4/dist/sweetalert2.all.min.js"></script>
<div class="tmp" style="display: none;">
    <input type="text" list="cars" /> 
    <datalist id="cars">
    </datalist>
</div>

如何使用 jQuery 动态创建包含数据列表的 HTML 输入？

How to dynamically create HTML input containing datalist using jQuery?

html

jquery

html-datalist

sweetalert2