javascript - descargar - select2 selected

¿Cómo inyectar consultas de búsqueda en Select2 v4 mediante programación?

Question

He creado una aplicación web utilizando un cuadro de búsqueda Select2, que se conecta a nuestro backend a través de AJAX. El cuadro de búsqueda pasa la consulta (diga "APPLES") al backend, que luego actualiza la página. ¿Cómo puedo insertar consultas de búsqueda en el cuadro de búsqueda mediante programación? Necesito pasar el "val" para que select2 llame al backend a través de AJAX y actualice la página. Estoy seguro de que esto es obvio, pero no pude encontrarlo en la documentación.

Por ejemplo, en lugar de obligar a un usuario a escribir "APPLES" en el cuadro de búsqueda, me gustaría que el usuario haga clic en un botón y haga que la palabra "APPLES" se rellene automáticamente en el campo de búsqueda y luego actualice la página.

¡Gracias!

Tras el comentario de Kevin, no estoy en este estado donde el texto está incrustado en el cuadro de búsqueda y el selector ha seleccionado el elemento correcto. ¿Cómo puedo enviar (o activar) esta solicitud? Intenté "keydown", "pressdown", "submit", "click" (que borra la casilla), etc.

Answer 1

Como una adición a esta respuesta, estábamos tratando de agregar mediante programación una nueva "etiqueta" a un select2 configurado para etiquetado. En lugar de desencadenar un evento keyup en el cuadro de búsqueda $, tuvimos que hacer lo siguiente.

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

Esto primero activa un evento que hace que el módulo ''buscar'' en select2 agregue un resultado ''resaltado'' que contenga el texto de la etiqueta, luego el segundo evento hace que select2 active el evento ''select'' internamente, lo que agrega una nueva etiqueta a las opciones select2 y También puede activar otras cosas, dependiendo de cómo lo hayas configurado.

Answer 2

Las respuestas en esta página me llevaron casi allí. Y como otros parecen tener los mismos problemas, estoy compartiendo cómo lo resolví.

Algunos de los comentarios sobre la respuesta de Kevin Browns preguntaron cómo simular ENTER después de que el texto se haya ingresado y esté resaltado.

Logré hacer eso solo con un tiempo de espera:

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

Entonces, la solución completa sería esta:

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

Answer 3

Puede establecer minimumInputLength en 0 y, en la función de data , puede verificar la length params.term y, si es 0 , establezca el valor de filtro a su valor de búsqueda predefinido.

Es bastante tonto, pero funciona;)

Answer 4

Select2 se utiliza para proporcionar un método auxiliar select2(''search'', ''term'') que habría ayudado con esto, pero no se trasladó a Select2 4.0.0.

Hay varias formas de hacerlo, pero en general, todas siguen el mismo patrón de pasos.

1. Abra el menú desplegable Select2
2. Introduzca el texto de búsqueda en el cuadro de búsqueda
3. Activa los eventos del teclado necesarios para que Select2 comience la búsqueda (normalmente se ingresa)

Entonces, en este momento, en Select2 4.0.0, el código para hacerlo se vería como

$(''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>

Si bien este ejemplo no utiliza AJAX, activará una solicitud AJAX si Select2 está configurado para ello.

Answer 5

para mí, la activación de ''keyup'' solo funcionaba cuando el usuario aún no había seleccionado ninguna opción. Lo que funciona cada vez es disparar ''entrada'' en su lugar. (solo probado en Chrome)

basado en la respuesta de Kevin Brown:

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