jquery - select2 下拉列表是否支持使用 ajax 并允许用户输入新值？

Question

我am using select 2而且效果很好。我有一个示例，其中用户通过 ajax 从下拉列表中进行选择(与链接中列出的远程数据示例完全相同)，但我希望用户能够搜索并能够输入一个新值，该值不会不存在于后端。

我在多选上工作，但试图看看使用单个下拉选项时是否有相同的支持？

Answer 1

据我了解，您想要的是使用单选框，使用户能够从ajax源中进行选择，并且还能够自由键入文本。

此外，您已经让 ajax 部分正常工作，您唯一想知道的是添加用户输入的自由文本。

这是一个 Working Fiddle Select2 使用的插件版本是4.0.3

工作片段

$(".js-data-example-ajax").select2({
  language: {
    noResults: function() {
      return "No results found, <a id='newData' href='#' class='btn btn-xs btn-success'>Use the above text anyways</a>";
    }
  },
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  },
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection,
  createTag: function(params) {
    alert('create tag');
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

$(document).on('click', '#newData', function() {
  var $select2 = $(".js-data-example-ajax");
  debugger;
  var newStateVal = $select2.siblings("span.select2-container").find("input.select2-search__field").val();
  if ($select2.find("option[value=" + newStateVal + "]").length) {
    $select2.val(newStateVal).trigger("change");
    $select2.select2('close');
  } else {
    // Create the DOM option that is pre-selected by default
    var newState = new Option(newStateVal, newStateVal, true, true);
    // Append it to the select
    $select2.append(newState).trigger('change');
    $select2.select2('close');
  }
});


function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  if (repo.newOption) {
    alert('adasdasddads');
  }

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

.select2-container {
  width: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/css/s2-docs.css" rel="stylesheet" />
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet" />

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>

所需的更改是。

1) 我们需要更改自定义消息未找到结果的显示方式。我们需要在这里有一个选项，说明无论如何都添加键入的文本。因此，添加 language 选项，并在其中添加 noResults 选项，并在未找到结果时提供自定义消息。在此自定义消息中，我们添加一个按钮，我们为其编写进一步的逻辑以将此自由键入的文本添加到我们的下拉列表中。

代码如下

$(".js-data-example-ajax").select2({
  language: {
    noResults: function() {
      return "No results found, <a id='newData' href='#' class='btn btn-xs btn-success'>Use the above text anyways</a>";
    }
  },
  //... your other setting
};

添加此设置后，当找不到匹配项时，插件的结果为

2) 现在，完成上述更改后，我们需要添加额外的代码来处理按钮的单击事件，以将这个新选项添加​​到我们的插件中。代码如下。

$(document).on('click', '#newData', function() {
  var $select2 = $(".js-data-example-ajax");      
  var newStateVal = $select2.siblings("span.select2-container").find("input.select2-search__field").val();
  //Get the new value.
  if ($select2.find("option[value=" + newStateVal + "]").length) { //if already present just select it
    $select2.val(newStateVal).trigger("change");
  } else {
    // Create the DOM option that is pre-selected by default
    var newState = new Option(newStateVal, newStateVal, true, true);
    // Append it to the select
    $select2.append(newState).trigger('change');
    $select2.select2('close');
  }
});

有了这个，插件就能够从ajax和自由类型表单中选择值。这是一个单一的选择示例，因为这就是您想要的。

希望这有帮助!!