javascript - Cargando valores en Selectize.js

jquery json

Question

Problema

Tengo una entrada de texto que he seleccionado como etiquetas que funciona bien para consultar datos remotos, puedo buscar e incluso crear nuevos elementos con eso y todo funciona bien.

Utilizando selectize:

var $select = $(''.authorsearch'').selectize({
    valueField: ''AuthorId'',
    labelField: ''AuthorName'',
    searchField: [''AuthorName''],
    maxOptions: 10,
    create: function (input, callback) {
        $.ajax({
            url: ''/Author/AjaxCreate'',
            data: { ''AuthorName'': input },
            type: ''POST'',
            dataType: ''json'',
            success: function (response) {
                return callback(response);
            }
        });
    },
    render: {
        option: function (item, escape) {
            return ''<div>'' + escape(item.AuthorName) + ''</div>'';
        }
    },
    load: function (query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: ''/Author/SearchAuthorsByName/'' + query,
            type: ''POST'',
            dataType: ''json'',
            data: {
                maxresults: 10
            },
            error: function () {
                callback();
            },
            success: function (res) {
                callback(res);
            }
        });
    }
});

El cuadro de texto:

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" />

Ejemplos:

Luego, cuando selecciono uno (en este caso, ''apple''), aparece en un distintivo como es de esperar y el valor subyacente del cuadro de texto es una lista separada por comas de los valores de estos elementos.

Salida de corriente

El problema es cuando carga una página y quiero que los valores recuperados de la base de datos se muestren en el ingreso de texto seleccionado como etiquetas, solo carga los valores y no veo forma de mostrar el nombre para mostrar.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" />

Deseado Ouput

He intentado todo tipo de valores para que el campo de valor de las entradas cargue los elementos como muestra su nombre para mostrar y no sus valores. A continuación se muestra un ejemplo de un solo objeto devuelto como JSON, pudiendo cargar una matriz JSON de estos, ya que las etiquetas seleccionadas serían ideales.

[{"AuthorId":1,"AuthorName":"Test Author"},
 {"AuthorId":3,"AuthorName":"Apple"},
 {"AuthorId":4,"AuthorName":"Test Author 2"}]

¿Cómo puedo hacer esto? ¿Debo configurar el valor del cuadro de texto de una manera particular, o debo cargar mis valores existentes usando algún javascript?

Answer 1

Aún más simple en la nueva versión de seleccionar utilizando el atributo de elementos. Básicamente, para configurar un elemento seleccionado, primero debe tenerlo en las opciones. Pero si usa datos remotos como yo, las opciones están vacías, por lo que debe agregarlas a 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 para averiguarlo ... así que solo compartirlo

Answer 2

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

<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item">

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 tu pregunta, pero quería compartir solo en caso de que esto pudiera ayudar a alguien.

Answer 3

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

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" 
 data-selectize-value=''[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]''/>

Básicamente, analiza el data-selectize-value valor de selección de datos y luego agrega las opciones a la selección y luego agrega los elementos.

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 presume que mi objeto JSON está formado correctamente, y que es un solo objeto o una matriz de objetos, por lo que puede o no ser apropiado para las necesidades de otra persona.

Así que analiza:

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

A:

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