Saltar al contenido

Cargando valores en Selectize.js

Al fin luego de tanto batallar pudimos dar con la solución de este atasco que muchos lectores de esta web presentan. Si deseas compartir alguna información no dudes en compartir tu información.

Solución:

Terminé usando el onInitialize devolución de llamada para cargar los valores JSON almacenados en un data-* campo. Puedes verlo en acción aquí en este jsfiddle.


Básicamente analiza el data-selectize-value valor y luego agrega la(s) opción(es) a la selección y luego agrega los elementos mismos.

onInitialize: function() 
    var existingOptions = JSON.parse(this.$input.attr('data-selectize-value'));
    var self = this;
    if(Object.prototype.toString.call( existingOptions ) === "[object Array]") 
        existingOptions.forEach( function (existingOption) 
            self.addOption(existingOption);
            self.addItem(existingOption[self.settings.valueField]);
        );
    
    else if (typeof existingOptions === 'object') 
        self.addOption(existingOptions);
        self.addItem(existingOptions[self.settings.valueField]);
    

Mi solución supone que mi objeto JSON está formado correctamente y que es un objeto único o una matriz de objetos, por lo que puede o no ser apropiado para las necesidades de otra persona.

Entonces analiza:

["AuthorId":1,"AuthorName":"Test",
 "AuthorId":2,"AuthorName":"Test2"]

A:

ingrese la descripción de la imagen aquí

Basado, por supuesto, en mi configuración de selección en mi publicación original anterior.

Gracias a su respuesta y en base a su enfoque onInitialize() terminé con una solución similar. En mi caso, solo necesitaba traducir un valor, por lo que pude almacenar la identificación y la etiqueta como datos attributes en el campo de entrada.


Luego en la inicialización:

onInitialize: function() 
        var actualValue = this.$input.data('actual-value');
        if (actualValue)
            this.addOption(id: actualValue, value: this.$input.data('init-label'));
            this.setValue(actualValue);
            this.blur();
        
    

Según estas opciones:

$('input').selectize(
    valueField: 'id',
    labelField: 'value',
    searchField: 'value',
    create: false,
    maxItems: 1,
    preload: true,
    // I had to initialize options in order to addOption to work properly 
    // although I'm loading the data remotely
    options: [],
    load: ... ,
    render: ...,
    onInitialize: ....
);

Sé que esto no responde a su pregunta, pero quería compartir en caso de que esto pueda ayudar a alguien.

Aún más simple en la nueva versión de selectize usando elementos attribute. Básicamente, para configurar un elemento seleccionado, debe tenerlo primero en las opciones. Pero si usa datos remotos como yo, las opciones están vacías, por lo que debe agregarlos en ambos lugares.

$('select').selectize({
        valueField: 'id',
        labelField: 'name',
        options:[id:'123',name:'hello'],
        items: ['123'],
        ...

Esto está funcionando para mí y me tomó un tiempo resolverlo … así que solo comparto

Si conservas algún preocupación y disposición de reaccionar nuestro división eres capaz de añadir una anotación y con mucho placer lo interpretaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *