web-dev-qa-db-ja.com

プログラムで検索クエリをSelect2 v4に挿入する方法は？

Select2検索ボックスを使用して、AJAX経由でバックエンドに接続するWebアプリを作成しました。検索ボックスがクエリ（「APPLES」など）をバックエンドに渡し、バックエンドがページを更新します。プログラムで検索クエリを検索ボックスに挿入するにはどうすればよいですか？ select2がAJAXを介してバックエンドを呼び出し、ページを更新するように、「val」を渡す必要があります。これは明白だと確信していますが、ドキュメントでは見つかりませんでした。

たとえば、ユーザーに検索ボックスに「リンゴ」と入力させるのではなく、ボタンをクリックして、「リンゴ」という単語を検索フィールドに自動的に入力してから、ページを更新してもらいたいと思います。

ありがとう！

ケビンのコメントに続き、私はテキストが検索ボックスに埋め込まれ、セレクターが正しいアイテムを選択したこの状態ではありません。このリクエストを送信（またはトリガー）するには、「キーダウン」、「プレスダウン」、「送信」、「クリック」（ボックスをクリア）などを試しました。

enter image description here

javascriptjquery-select2jquery-select2-4
23
vgoklani

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リクエストがトリガーされます。

38
Kevin Brown

私にとって「キーアップ」のトリガーは、ユーザーがまだオプションを選択していない場合にのみ機能しました。常に機能するのは、代わりに「入力」をトリガーすることです。 （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');
});
7
Marc A.

minimumInputLengthを0に設定してから、data関数でparams.termlengthを確認し、0の場合は、事前定義された検索値に値をフィルターします。

ばかげていますが、動作します;）

5
Edu

このページの答えは私をほとんどそこに連れて行ってくれました。他の人にも同じ問題があるようですので、解決方法を共有しています。

ケビンブラウンズの回答に対するコメントの一部は、テキストが入力されて強調表示された後で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');
});
2
sunomad

この回答への追加として、タグ付け用に構成されたselect2にプログラムで新しい「タグ」を追加しようとしました。 $ searchボックスでキーアップイベントをトリガーする代わりに、以下を実行する必要がありました。

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

これは最初にselect2の「search」モジュールにタグテキストを含む「強調表示された」結果を追加させるイベントを発生させ、次に2番目のイベントによりselect2に内部的に「select」イベントを発生させ、select2オプションに新しいタグを追加します。設定方法によっては、他のものもトリガーする場合があります。

2
skila