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

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

例如，与强制用户在搜索框中键入“APPLES”不同，我希望用户单击一个按钮，将单词“APPLES”自动填充到搜索字段中，然后更新页面

谢谢

---

在Kevin的评论之后，我没有处于文本嵌入到搜索框中并且选择器选择了正确的项目的状态。如何提交（或触发）此请求，我尝试了“按键”、“按下”、“提交”、“单击”（清除框）等

---

Select2用于提供一个

Select2（'search'，'term'）

helper方法，该方法本可以帮助实现这一点，但它没有被引入Select2 4.0.0

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

打开Select2下拉列表

在搜索框中输入搜索文本

触发Select2开始搜索所需的键盘事件（通常为

input

）

因此，现在，在Select2 4.0.0中，执行此操作的代码如下所示

$（'select'）。选择2（）；
功能选择2\u搜索（$el，术语）{
$el.select2（“打开”）；
//获取下拉列表或所选内容中的搜索框
//下拉=单个，选择=多个
var$search=$el.data（'select2'）。下拉列表。$search | |$el.data（'select2'）。selection。$search；
//这是未记录的，将来可能会改变
$search.val（术语）；
$search.trigger（'keyup'）；
}
$（'button'）。在（'click'，函数（）{
var$select=$（$（this.data（'target'））；
选择2_搜索（$select，'Arizona'）；
});

阿拉巴马州
阿拉斯加州
亚利桑那州
搜索“亚利桑那州”



阿拉巴马州
阿拉斯加州
亚利桑那州
搜索“Arizona”
作为此答案的补充，我们试图以编程方式向配置为标记的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选项添加一个新标记，还可能触发其他内容，取决于您的配置方式。
您可以将
minimumInputLength
设置为
0
，然后在
data
功能中，您可以检查
params.term
length
，如果是
0
，则将筛选值设置为预定义的搜索值

这很傻，但它是有效的；）
 对于我来说，只有当用户尚未选择任何选项时，触发“keyup”才起作用。每次起作用的是触发“输入”。（仅在铬上测试）

根据凯文·布朗的回答：

$('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');
});

这一页上的答案让我几乎达到了目的。因为其他人似乎也有同样的问题，我正在分享我是如何解决的

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

我只有在超时的情况下才能做到这一点：

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');
});

对于使用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>


谢谢您的回复。不幸的是，我在$e1.data（'select2'）下拉列表之后没有看到$search变量。我还进行了一个AJAX调用，因此select2在AJAX请求之后才会看到所有ID。我已经为此工作了几天，希望你能澄清一些事情。ThanksI应该补充一点，我有两个搜索框，只有一个使用AJAX。非ajax select2框通过$selectionBox.val（23）.change（'trigger'）无缝地处理注入。我猜AJAX版本失败了，因为它没有ID。当我运行这个函数$selectionBoxAJAX.val（47）.change（'trigger'）时，会推送一个更新（屏幕会更新），但是查询是空的，并且正确的文本不会被更新Hanks Kevin，它就快到了！文本现在在选择框中，并在下拉列表中突出显示，要使其提交的“触发器”是什么？这还不完整，您如何在之后模拟输入，以便下拉列表接受输入的字符串并关闭？我可以使用$（'.select2-results_uoption[aria selected]'）模拟输入。触发器（“mouseup”）；顺便说一句，赏金是不可能的，因为如果不连接到全局AJAX处理程序，就无法检测触发的AJAX请求何时完成。只是确认一下，没有办法强制点击通过？不管怎样，我非常感谢您的帮助，赏金是你的。你可以通过模拟
mouseup
事件强制选择结果（或者如果你有相关信息，只需注入
），但你无法（准确地）预测结果列表何时显示结果。这就是我一直在寻找的！感谢“最小输入长度：0”的建议。我的任务是用ajax调用预先填充select2的一些初始数据。因此，我需要做的就是将最小输入设置为0，并在服务器上使用空GET param“q=”过滤掉请求，然后返回默认值。令人惊叹的！自2019年起，由于安全原因，浏览器阻止了关键事件触发器