31

我使用 Select2 搜索框构建了一个网络应用程序，它通过 AJAX 连接到我们的后端。搜索框将查询（比如“APPLES”）传递到后端，然后更新页面。如何以编程方式将搜索查询注入搜索框？我需要传入“val”，以便 select2 通过 AJAX 调用后端并更新页面。我确定这很明显，但我在文档中找不到。

例如，我不想强​​迫用户在搜索框中输入“APPLES”，而是希望用户单击一个按钮并将“APPLES”这个词自动填充到搜索字段中，然后更新页面。

谢谢！

根据 Kevin 的评论，我没有处于文本嵌入搜索框中并且选择器选择了正确项目的状态。如何提交（或触发）此请求，我尝试了“keydown”、“pressdown”、“submit”、“click”（清除框）等。

在此处输入图像描述

4

7 回答 7

50

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 请求。

于 2015-05-30T23:14:05.513 回答
10

对我来说，触发“keyup”仅在用户尚未选择任何选项时才有效。每次都有效的是触发“输入”。（仅在 Chrome 上测试）

所以基于凯文布朗的回答：

$('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');
});
于 2017-02-09T20:06:34.023 回答
6

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

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');
});
于 2018-04-07T13:45:54.293 回答
5

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

这很愚蠢，但它有效；）

于 2016-02-25T16:51:18.560 回答
2

对于那些使用 Ajax 调用来填充 select2 并希望搜索和设置选定值的人。

您还有其他方法，但这个答案对我来说非常适合Select2 4.0.0

  • 为了打击集合，我使用了 deley 功能

JS

$('.select2').select2();

    function select2_search_and_set(controlId, term) {
var control = $("#" + controlId);
var $search = control.data('select2').dropdown.$search || control.data('select2').selection.$search;

$search.val(term);
$search.trigger('keyup');

setTimeout(function () {
    $search.trigger($.Event('keydown', { which: 13 }));
}, 500);
}

   select2_search_and_set("target", 'term');

html

<select class="form-control select2" id="target" name="target"></select>
于 2021-04-20T19:08:29.453 回答
2

作为这个答案的补充，我们试图以编程方式将一个新的“标签”添加到配置为标签的 select2 中。我们必须执行以下操作，而不是在 $search 框上触发 keyup 事件。

$search.val(tag);
$search.closest('.select2-search--inline')
    .trigger($.Event('input', { which: 13 }));
$search.closest('.select2-selection--multiple')
    .trigger($.Event('keydown', { which: 13 }));

这首先触发一个事件，导致 select2 中的“搜索”模块添加包含标签文本的“突出显示”结果，然后第二个事件导致 select2 在内部触发“选择”事件，该事件将新标签添加到 select2 选项和也可能会触发其他东西，具体取决于您的配置方式。

于 2015-07-24T11:02:20.857 回答
1

我一直在发疯，直到我来到这个线程。我想要一个 select2 对话框，用户可以在其中输入一个可能不是选项之一的名称，但我仍然可以设置它并且是可见的。

借助此处的答案组合，我设法解决了我的问题。

去做这个：

  1. 我首先需要将 select2 上的 tags 选项设置为 true

  2. 无需打开 select2

  3. 我需要将触发器从“keyup”更改为“input”

  4. 我需要在最后添加以下行来模拟输入键 $('.select2-results__option').trigger("mouseup");

     Here is the jsfiddle sample for you to try for yourself

    https://jsfiddle.net/jainpankaj/o8g37wfu/8/#&togetherjs=I0e96aNexC

于 2021-07-07T00:05:22.737 回答