无需JS初始化的可搜索选择输入

Question

我需要一个可搜索的选择输入，不需要在JS中初始化。我在网站上使用Ajax，所以您不知道在调用之前有多少选择项及其ID，因此data-list解决方案可以，但是用户不应发送键入的输入，并且应该像选择输入一样工作，如果有一个ID和一个定义的标签，则显示标签并发送ID。你能帮助我吗？我发现的唯一解决方案需要这样的JS初始化：

$(".js-example-disabled").select2();

但是我们在AJAX调用之前不知道id，也不知道我们需要处理的选择输入的数量。

Answer 1

您可以在AJAX调用的success处理程序中构建自己的select元素。然后，将其添加到主体后，请使用.select2()对其进行初始化。这里唯一要考虑的是文档中的位置。

function dynamicSelect2(url, placement) {
  $.ajax({
    url: url,
    success: function(data) {
      var $select = $('<select></select>');
      $.each(data, function(i, item) {
        $select.append(`<option value="${item}">${item}</option>`);
      });
      $select.appendTo(placement);
      $select.select2();
    })
  });
}

我将其包装在一个函数中，以便您可以动态更改数据端点和在主体中的位置。

dynamicSelect2('yourdata', document.body);