Select2 4.0.3 无法使用 ajax 调用填充其他 select2 字段

Question

我在使用 Select2 时遇到了一些问题，基本上我需要用从 Select2 Ajax 搜索中检索到的数据填充一些其他表单字段。

甚至可以在此处找到以下示例：

我无法使用从 Select2 找到的结果以编程方式填充某些字段

举个例子，假设我有三个字段，我可以使用其中两个字段来搜索数据，我希望在选择 ajax 调用返回值之一后自动填充其他剩余字段.

因此，例如：

 Test field 01 (Select2 field)
 Test field 02 (Select2 field)
 Test field 03 (standard input field)

如果我在 "Test field 01" 上搜索内容，我希望 02 和 03 会自动填充。

我已经实现了一种解决方案，您可以在下面找到它，但不适用于 Select2 字段，只能用于输入字段。

如果我使用代码检查器，我会看到 "select" 元素中的新选项已正确创建并标记为 "selected" 但似乎 "select2-selection__rendered"触发 "change" 事件后，span 元素未正确更新

在我的测试中，我还注意到我用来更新数据的函数 "updateselect2" 被调用四次，每次我 select 来自结果的一个值和因此，我在目标 select 框中发现了 4 次相同的值。

看看下面的动画 gif 以了解完整的行为

我哪里做错了？

我的设置是：

jquery-3.1.0
选择2 4.0.3

您可以在下面找到我当前工作的完整示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>Test</title>
    <script src="jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="select2.min.css"/>    
    <script src="select2.full.js"></script>


</head>
<body>
<div class="section ">
  <div class="container ">
    <div class="row">
        <div class="col-md-2">
          <div class="form-group">
            <label for="testField01" class="control-label">Test field 01</label>
            <select id="testField01" class="form-control" name="testField01" style="width:150px;">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label for="testField02" class="control-label" >Test field 02</label>
            <select id="testField02" class="form-control" name="testField02" style="width:150px;">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label for="testField03" class="control-label" style="width:150px;">Test field 03</label>
            <input id="testField03" class="form-control" value="" readonly="readonly" />
          </div>
        </div>
    </div>
  </div>
</div>

</body>

</html>

JAVASCRIPT:

var select2_query = {};

function markMatch(text, term) {
    // Find where the match is
    var match = text.toUpperCase().indexOf(term.toUpperCase());

    var $result = $('<span></span>');

    // If there is no match, move on
    if (match < 0) {
        return $result.text(text);
    }

    // Put in whatever text is before the match
    $result.text(text.substring(0, match));

    // Mark the match
    var $match = $('<span style="color:red"></span>');
    $match.text(text.substring(match, match + term.length));

    // Append the matching text
    $result.append($match);

    // Put in whatever is after the match
    $result.append(text.substring(match + term.length));

    return $result;
}

function updateselect2(elId, values) {

  var $element = $('#' + elId); // the element that Select2 is initialized on
  if ($element.attr('id') == undefined) {
    return false;
  }
  $element.empty();
  var $option = $("<option selected></option>"); // the new base option
  $option.val(values[elId]); // set the id
  $option.text(values[elId]); // set the text
  $element.append($option); // add it to the list of selections
  $element.trigger("change"); // tell Select2 to update
}


function formatResult(result) {
  if (result.loading) {
    return result.text;
  }
  var term = select2_query.term || '';
  var $formattedResult = markMatch(result.testField01 + ' - ' + result.testField03, term);

  return $formattedResult;
}

function formatSelection(selection) {
  if (!selection.selected) {
    updateselect2('testField02', selection);
    $('#testField03').val(selection.testField03);
  }
  return selection.testField01;
}


function initSearch(fieldId, searchType) {
    $("#" + fieldId).select2({
        ajax: {
            url: "/search/data",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    id: params.term, // search term
                    by: searchType,
                    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: 4,
        templateResult: formatResult,
        templateSelection: formatSelection,
        language: {
            searching: function (params) {
                select2_query = params;
                return 'Searching…';
            }
        }
    });
}

$(document).ready(function() {

  $('testField01').select2();
  $('testField02').select2();

  initSearch('testField01', 'testField01');
  initSearch('testField02', 'testField02');

});

JSON 数据样本：

{"total_count":1,"incomplete_results":false,"items":[{"id":1,"testField01":"123456789","testField01":"987654321", "testField03":"ABCDEFGHIJK"}]}

Answer 1

嗯，当您将选项附加到 select 字段时，您需要重新初始化 select2 元素，例如：

$element.select2("destroy");

而不是 updateselect2() 函数中的 $element.trigger("change");。

此外，更改 select2 中的值的正确方法不是触发 change 侦听器，而是调用 .select2('val', thevalue)，这在您的情况下不起作用，因为新选项，但请记住这一点。

另请注意：无需在 document.ready 中初始化 select2，因为 initSearch 会为您完成。

最后注意：你的样本 json 是错误的，你通过了 testField01 两次

Select2 4.0.3 无法使用 ajax 调用填充其他 select2 字段

Select2 4.0.3 unable to fill other select2 fields using ajax call

javascript

ajax

jquery

select2