javascript - select2 自动选择项目进行ajax调用

Question

有没有办法让 select2 控件在 ajax 响应包含额外数据时自动选择一个项目。

我想实现我的 Controller ，在 JsonResult 中将项目标记为精确的 mach，然后 select2 控制自动选择它，而无需打开下拉菜单。

从用户 Angular 来看: 如果用户在 select2 文本框中键入与 Controller 上的项目完全匹配的字符串。例如如果用户输入条形码， Controller 方法会找到该条形码。 Select2 控件将立即选择该项目，而无需打开下拉菜单。

如果用户在查询中键入的内容不完全匹配， Controller 将返回没有参数精确的项目列表，并且 select2 将打开下拉列表以显示用户可能的项目选择。

Answer 1

要使用 AJAX 执行此操作，您需要将选定的选项添加到 select DOM 元素，然后触发 select2 小部件上的更改，以便它重新绘制。以下可能就是您正在寻找的内容。此示例使用 processResults 检查是否存在恰好一个匹配项，并且它与用户键入的内容完全匹配。

$("#product_id").select2({
  ajax: {
    url: "/api/productLookup",
    dataType: 'json',
    data: function (params) {
      return {
        term: params.term,
        };
    },
    processResults: function (data) {
        var searchTerm = $("#product_id").data("select2").$dropdown.find("input").val();
        if (data.results.length == 1 && data.results[0].text == searchTerm) {
            $("#product_id").append($("<option />")
                .attr("value", data.results[0].id)
                .html(data.results[0].text)
            ).val(data.results[0].id).trigger("change").select2("close");
        }
        return data;
    },
    minimumInputLength: 8,
    cache: true
  }
});