Question

页面上有jQuery Select2插件，带有多选选项，带有ajax元素搜索（搜索和加载）。目前存在一个问题，当搜索第一个元素时，按Enter键会使突出显示的元素出现在所选字段中（待选择）。

但是当选择第二个和更多元素时，按ENTER键不会做任何事情。 “change”事件未被激活。通常，按ENTER键始终会选中突出显示的元素，选项下拉菜单将关闭。所以我可能在配置上做错了。

如果某人拥有此控件的高级经验并建议问题所在，我非常感谢。在processSelectionItem函数中，有一个很好的格式化选定值，我需要做的一些技巧，我正在替换一些select2.option并触发'change'事件。

初始化代码如下：

$("#searchRepo").select2({
  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: $.map(data.items, function(item) {
          return {
            id: item.id,
            text: item.name,
            fullname: item.full_name
          };
        }),
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      }
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  },
  minimumInputLength: 2,
  templateResult: function(cnt) {
    return cnt.fullname;
  },
  templateSelection: function(cnt) {
    return "<a onclick='return alert(\"" + cnt.id + "\");' href='#'>" + cnt.text + "</a>";
  },
  width: '100%'
}).on("change", function(e) {
  var container = $(e.target).closest("div");
  if ($(e.target).select2('val') == null) {
    $(container).find("input[type='text'].rep-recs").val('');
  } else {
    var selectedRepos = $(e.target).select2('data');
    var selectedReposStr = selectedRepos.map(function(item, index) {
      return item.text + ";" + item.id;
    }).join(", ");
    $(container).find("input[type='text'].rep-recs").val(selectedReposStr);
  }
});
$("#searchRepo").append(new Option('inserted repo', 232423432, true, true)).trigger('change');

<script src="https://code.jquery.com/jquery-2.x-git.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="form-control re-re-ate" data-placeholder="Search repo" id="searchRepo" name="searchRepo" multiple="multiple"></select>

jQuery Select2选择在第一个元素后输入不工作

0 个答案: