Actualice los datos de select2 sin reconstruir el control

Te doy la bienvenida a nuestra comunidad, en este lugar encontrarás la respuesta que estabas buscando.

Solución:

seleccionar2 v3.x

si tienes locales array con opciones (recibidas por llamada ajax), creo que deberías usar data parámetro como función que devuelve resultados para el cuadro de selección:

var pills = [id:0, text: "red", id:1, text: "blue"]; 

$('#selectpill').select2(
    placeholder: "Select a pill",
    data: function()  return results: pills; 
);

$('#uppercase').click(function() 
    $.each(pills, function(idx, val) 
        pills[idx].text = val.text.toUpperCase();
    );
);
$('#newresults').click(function() 
    pills = [id:0, text: "white", id:1, text: "black"];
);

VIOLÍN: http://jsfiddle.net/RVnfn/576/

En caso de que personalice la interfaz select2 con botones, simplemente llame updateResults (este método no permite llamar desde fuera del objeto select2 pero puede agregarlo a allowedMethods array en select2 si es necesario) método después de actualizar los datos array(pastillas en el ejemplo).

---

select2 v4: adaptador de datos personalizado

Adaptador de datos personalizado con adicional updateOptions (no está claro por qué original ArrayAdapter carece de esta funcionalidad) el método se puede usar para actualizar dinámicamente la lista de opciones (todas las opciones en este ejemplo):

$.fn.select2.amd.define('select2/data/customAdapter',
    ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) 
        function CustomDataAdapter ($element, options) 
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
        
        Utils.Extend(CustomDataAdapter, ArrayAdapter);
        CustomDataAdapter.prototype.updateOptions = function (data) 
            this.$element.find('option').remove(); // remove all options
            this.addOptions(this.convertToOptions(data));
                
        return CustomDataAdapter;
    
);

var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');

var sel = $('select').select2(
    dataAdapter: customAdapter,
    data: pills
);

$('#uppercase').click(function() 
    $.each(pills, function(idx, val) 
        pills[idx].text = val.text.toUpperCase();
    );
    sel.data('select2').dataAdapter.updateOptions(pills);
);

VIOLÍN: https://jsfiddle.net/xu48n36c/1/

---

select2 v4: función de transporte ajax

en v4 puede definir un método de transporte personalizado que puede funcionar con datos locales array (gracias a @Caleb_Kiage, por ejemplo, jugué con él sin éxito)

documentos: https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used

Select2 usa el método de transporte definido en ajax.transport para enviar solicitudes a su API. De forma predeterminada, este método de transporte es jQuery.ajax, pero se puede cambiar.

$('select').select2(
    ajax: 
        transport: function(params, success, failure) 
            var items = pills;
            // fitering if params.data.q available
            if (params.data && params.data.q) 
                items = items.filter(function(item) 
                    return new RegExp(params.data.q).test(item.text);
                );
            
            var promise = new Promise(function(resolve, reject) 
                resolve(results: items);
            );
            promise.then(success);
            promise.catch(failure);
        
    
);

PERO con este método, debe cambiar los ID de las opciones si el texto de la opción está en array Cambios: la lista de elementos de opciones internas de select2 dom no se modificó. Si id de opción en array permanece igual: se mostrará la opción guardada anterior en lugar de actualizarse desde array! eso no es problema si array modificado solo al agregarle nuevos elementos – ok para los casos más comunes.

VIOLÍN:https://jsfiddle.net/xu48n36c/3/

Creo que es suficiente para entregar los datos directamente:

$("#inputhidden").select2("data", data, true);

Tenga en cuenta que el segundo parámetro parece indicar que se desea una actualización.

Gracias a @Bergi por ayudar con esto.

---

Si eso no se actualiza automáticamente, puede intentar llamar directamente al método updateResults.

$("#inputhidden").select2("updateResults");

O actívelo indirectamente enviando un disparador a “input.select2-input” así:

var search = $("#inputhidden input.select2-input");
search.trigger("input");

Usando Select2 4.0 con Meteor puedes hacer algo como esto:

Template.TemplateName.rendered = ->

  $("#select2-el").select2(
    data  : Session.get("select2Data")
  )

  @autorun ->

    # Clear the existing list options. 
    $("#select2-el").select2().empty()

    # Re-create with new options.
    $("#select2-el").select2(
      data  : Session.get("select2Data")
    )

Lo que está sucediendo:

1. Cuando se representa la plantilla…
2. Inicie un control select2 con datos de la sesión.
3. La función @autorun (this.autorun) se ejecuta cada vez que cambia el valor de Session.get(“select2Data”).
4. Cada vez que cambie la sesión, borre las opciones select2 existentes y vuelva a crear con nuevos datos.

Esto funciona para cualquier fuente de datos reactiva, como Collection.find().fetch(), no solo Session.get().

NOTA: a partir de la versión 4.0 de Select2, debe eliminar las opciones existentes antes de agregar otras nuevas. Consulte este problema de GitHub para obtener más detalles. No hay ningún método para ‘actualizar las opciones’ sin borrar las existentes.

Lo anterior es coffeescript. Muy similar para Javascript.

Te mostramos comentarios y calificaciones

---

---

Utiliza Nuestro Buscador