如何以编程方式将搜索查询注入Select2 v4？ [英] How to programmatically inject search queries into Select2 v4?

问题描述

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

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.

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

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.

谢谢！

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

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.

推荐答案

Select2用于提供一个 select2（'search'，'term'）辅助方法，它可以帮助这个，但它没有带来选择2 4.0.0。

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.

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

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

1. 打开Select2下拉列表


2. 在搜索框中输入搜索文本


3. 触发Select2开始搜索所需的键盘事件（通常输入）

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)

所以，现在，在Select2 4.0.0中，执行此操作的代码看起来像

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

$('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，但如果此示例不使用AJAX，则会触发AJAX请求Select2是为它配置的。

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

这篇关于如何以编程方式将搜索查询注入Select2 v4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！