31

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

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

ありがとう!


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

ここに画像の説明を入力

4

7 に答える 7

50

Select2select2('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 に答える
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 に答える
2

Ajax 呼び出しを使用して select2 に入力し、選択した値を検索して設定したい場合。

あなたができる他の方法がありますが、この答えはSelect2 4.0.0で私にとって完全に機能します

  • セットを打つにはディレイ機能を使いました

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 に答える