如何以编程方式将搜索查询注入Select2 v4？

Question

我使用Select2搜索框构建了一个web-app,它通过AJAX连接到我们的后端.搜索框将查询(例如"APPLES")传递给后端,然后后端更新页面.如何以编程方式将搜索查询注入搜索框？我需要传入"val",以便select2通过AJAX调用后端并更新页面.我确信这很明显,但我在文档中找不到它.

例如,我希望用户单击一个按钮并在搜索字段中自动填充"APPLES"一词,然后让页面更新,而不是强迫用户在搜索框中键入"APPLES".

谢谢!

---

在Kevin的评论之后,我不处于这种状态,其中文本嵌入在搜索框中,并且选择器已经选择了正确的项目.如何提交(或触发)此请求,我尝试了"keydown","pressdown","submit","click"(清除框)等.

Answer 1

Select2用于提供一个select2('search', 'term')辅助方法,可以帮助它,但它没有带到Select2 4.0.0.

有几种方法可以做到这一点,但总的来说它们都遵循相同的步骤模式

1. 打开Select2下拉列表
2. 在搜索框中输入搜索文本
3. 触发Select2开始搜索所需的键盘事件(通常input)

所以,现在,在Select2 4.0.0中,这样做的代码看起来就像

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');
  
  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future
  
  $search.val(term);
  $search.trigger('keyup');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="single">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#single">Search for 'Arizona'</button>
<br /><br />

<select style="width: 200px;" id="multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#multiple">Search for 'Arizona'</button>

虽然此示例不使用AJAX,但如果为其配置了Select2,它将触发AJAX请求.

Answer 2

对我来说,触发'keyup'只有在用户没有选择任何选项时才有效.每次都有效的是触发"输入".(仅在Chrome上测试过)

基于Kevin Brown的回答:

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

Answer 3

这个页面上的答案让我几乎到了那里。因为其他人似乎也有同样的问题，所以我正在分享我是如何解决它的。

关于 Kevin Browns 回答的一些评论询问如何在输入文本并突出显示后模拟 ENTER。

我设法做到这一点只有超时：

setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

所以，完整的解决方案是这样的：

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
  setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

Answer 4

您可以在您可能检查的函数中设置minimumInputLength为0then ，如果是，则将过滤器值设置为您预定义的搜索值。dataparams.term length0

这很愚蠢，但它有效;)