select2: ¿cómo actualizar las opciones después de cargar el contenido de ajax dinámicamente, sin reiniciar el cuadro de búsqueda?

He leído a través de la documentación de select2, y no parece tener una manera de refrescar las opciones, sin cerrar la selección.

La forma actual de hacerlo (trabaja, pero restablece el plazo de búsqueda):

$('#charity-list').select2('close');
$('#charity-list').select2('open');

Código completo:

function fetchCharityListForSearchTerm(searchTerm) {
    console.log('search term ', searchTerm);
    axios({
        method: 'post',
        url: '/api/charities/search',
        data: {
            search_term: searchTerm
        }
    })
    .then(function (response) {
        var charitySelect = document.getElementById('charity-list');
        var charities = response.data.data;

        charitySelect.options.length = 0;
        
        charities.forEach((entry) => {
            var newOption = new Option(entry.name, entry.charity_id, false, false);
            $('#charity-list').append(newOption).trigger('change');
        });

        $('#charity-list').select2('close');
        $('#charity-list').select2('open');
    });
}

Pregunta hecha hace 3 años, 4 meses, 27 días - Por pixelpioneerx

3 Respuestas:

• llamada cuando vino por ajax después de la función ajax éxito

  > $('#charity-list').val(null).trigger('change.select2');
  

  Respondida el Dec 18, 2020 a las 12:27 - por scriptsculptor52b5

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Parece que estás buscando una forma de actualizar las opciones de Select2 después de cargar el contenido de forma dinámica sin reiniciar la búsqueda. Puedes lograr esto utilizando el método select2('destroy') y volviendo a inicializar Select2 después de haber actualizado las opciones.

  Aquí te muestro cómo podrías modificar tu código para lograrlo:

  javascript
  function fetchCharityListForSearchTerm(searchTerm) {
      console.log('search term ', searchTerm);
      axios({
          method: 'post',
          url: '/api/charities/search',
          data: {
              search_term: searchTerm
          }
      })
      .then(function (response) {
          var charitySelect = document.getElementById('charity-list');
          var charities = response.data.data;
  
          // Limpiar las opciones existentes y agregar las nuevas
          $('charity-list').empty();        charities.forEach((entry) => {
              var newOption = new Option(entry.name, entry.charity_id, false, false);
              $('charity-list').append(newOption).trigger('change');        });
  
          // Destruir y volver a inicializar Select2
          $('charity-list').select2('destroy');        $('charity-list').select2();
          // Mantener el cuadro de búsqueda abierto si estaba abierto
          if ($('charity-list').select2('isOpen')) {            $('charity-list').select2('open');        }
      });
  }
  

  Con estos cambios, primero se borran las opciones existentes y se agregan las nuevas opciones. Luego, se destruye el Select2 y se vuelve a inicializar. Si el cuadro de búsqueda estaba abierto previamente, se mantendrá abierto después de la actualización de las opciones.

  Respondida el Dec 19, 2020 a las 12:30 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Puedes utilizar el método trigger('change') de jQuery para actualizar las opciones del cuadro de selección select2 sin cerrar y volver a abrir la selección. Aquí tienes cómo puedes modificar tu código:

  javascript
  function fetchCharityListForSearchTerm(searchTerm) {
      console.log('search term ', searchTerm);
      axios({
          method: 'post',
          url: '/api/charities/search',
          data: {
              search_term: searchTerm
          }
      })
      .then(function (response) {
          var charitySelect = document.getElementById('charity-list');
          var charities = response.data.data;
  
          charitySelect.options.length = 0;
  
          charities.forEach((entry) => {
              var newOption = new Option(entry.name, entry.charity_id, false, false);
              $('charity-list').append(newOption);        });
  
          // Actualizar las opciones sin cerrar y volver a abrir la selección
          $('charity-list').trigger('change');    });
  }
  

  Al eliminar las líneas $('#charity-list').select2('close'); y $('#charity-list').select2('open');, el cuadro de selección se actualizará dinámicamente sin restablecer el cuadro de búsqueda.

  Respondida el Dec 19, 2020 a las 12:36 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---