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

How to programmatically inject search queries into Select2 v4?

提问by vgoklani

I've built a web-app using a Select2 search box, which connects to our backend via AJAX. The search box passes the query (say "APPLES") to the backend, which then updates the page. How do I programmatically inject search queries into the search box? I need to pass in the "val" so that select2 calls the backend via AJAX and updates the page. I'm sure this is obvious, but I couldn't find it in the documentation.

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

For example, instead of forcing a user to type "APPLES" into the search box, I would like the user to click a button and have the word "APPLES" automatically populated into the search field, and then have the page update.

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

Thanks!

谢谢！

---

---

Following Kevin's comment, I'm not in this state where the text is embedded in the searchbox and the selector has picked the correct item. How do I submit (or trigger) this request, I tried "keydown", "pressdown", "submit", "click" (which clears the box), etc.

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

回答by Kevin Brown

Select2 used to provide a select2('search', 'term')helper method that would have assisted with this, but it was not brought over to Select2 4.0.0.

Select2 曾经提供一个select2('search', 'term')帮助方法来帮助实现这一点，但它没有被带到 Select2 4.0.0。

There are a couple of ways that this could be done, but in general they all follow the same pattern of steps

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

1. Open the Select2 dropdown
2. Enter the search text into the search box
3. Trigger the keyboard events necessary for Select2 to start searching (usually input)

1. 打开 Select2 下拉菜单
2. 在搜索框中输入搜索文本
3. 触发 Select2 开始搜索所需的键盘事件（通常为input）

So, right now, in Select2 4.0.0 the code to do that would look like

所以，现在，在 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>

While this example does not use AJAX, it will trigger an AJAX request if Select2 is configured for it.

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

回答by Marc A.

for me triggering 'keyup' only worked when the user didn't select any option yet. What works every time is to trigger 'input' instead. (only tested on Chrome)

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

so based on Kevin Brown's answer:

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

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

回答by Edu

You can set minimumInputLengthto 0then in the datafunction you may check params.termlengthand if it's 0, set the filter value to your predefined search value.

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

It's quite silly, but it works ;)

这很愚蠢，但它有效;)

回答by skila

As an addition to this answer, we were trying to programmatically add a new 'tag' to a select2 configured for tagging. Instead of triggering a keyup event on the $search box, we had to do the following.

作为对这个答案的补充，我们试图以编程方式向配置为标记的 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 }));

This first fires an event that causes the 'search' module in select2 to add a 'highlighted' result containing the tag text, then the second event causes select2 to fire the 'select' event internally which adds a new tag to the select2 options and may also trigger other stuff, depending on how you've configured it.

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

回答by sunomad

The answers on this page got me almost there. And because others seem to have the same issues, I am sharing how I solved it.

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

Some of the comments on Kevin Browns answer asked how to simulate the ENTER after the text has been entered and is highlighted.

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

I managed to do that only with a timeout:

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

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

So, the full solution would be this:

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

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