Chargement des valeurs dans Selectize.js

Problème

J'ai une saisie de texte que j'ai selectized que les balises qui fonctionne très bien pour l'interrogation de données à distance, je peux rechercher et même de créer de nouveaux éléments à l'aide et que tout fonctionne bien.

À l'aide de 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);
            }
        });
    }
});

La zone de texte:

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

Exemples:

Chargement des valeurs dans Selectize.js

Puis, quand je sélectionne un (dans ce cas, 'pomme') il est livré dans un badge que vous vous attendez, et de la valeur sous-jacente de la zone de texte est une liste séparée par des virgules des valeurs de ces éléments.

Chargement des valeurs dans Selectize.js

Courant De Sortie

Le problème est que lorsque je charge une page et souhaitez que les valeurs extraites de la base de données à afficher dans la selectized de saisie de texte sous forme de balises, il ne charge que les valeurs et je ne vois pas de moyen d'afficher le nom d'affichage au lieu.

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

Chargement des valeurs dans Selectize.js

Souhaitée En Sortie

J'ai essayé toutes sortes de valeurs pour les entrées de champ de valeur de façon à charger les éléments montrant leur displayname et pas leurs valeurs. Ci-dessous est un exemple unique d'un objet retourné en JSON, être en mesure de charger un tableau JSON de ces selectized balises serait l'idéal.

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

Chargement des valeurs dans Selectize.js

Comment puis-je aller à ce sujet? Ai-je besoin pour former la valeur de la zone de texte d'une manière particulière, ou dois-je charger mes valeurs existantes à l'aide du javascript?

source d'informationauteur Alex.Ritna | 2014-09-11

J'ai fini par utiliser la onInitialize de rappel pour charger le JSON valeurs stockées dans une data-* champ. Vous pouvez le voir en action ici, dans cette jsfiddle.

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

Fondamentalement, il analyse le data-selectize-value valeur, puis ajoute l'option(s) à la selectize puis ajoute les éléments eux-mêmes.

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]);
    }
}

Ma solution ne présume mon objet JSON est formé correctement, et qu'il s'agit soit d'un seul objet ou un Tableau d'objets, de sorte qu'il peut ou peut ne pas être approprié pour quelqu'un elses besoins.

De sorte qu'il traite:

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

Chargement des valeurs dans Selectize.js

Basé bien sûr sur mon selectize paramètres dans mon premier post ci-dessus.

Merci pour votre réponse et en fonction de votre onInitialize() approche j'ai fini avec une solution similaire. Dans mon cas, j'ai juste besoin de traduire une valeur, donc j'ai été en mesure de stocker l'id de l'étiquette et que les attributs de données dans le champ de saisie.

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

Puis lors de l'initialisation:

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

En fonction de ces options:

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

Je sais que cela ne répond pas à votre question, mais je voulais partager juste au cas où cela pourrait aider quelqu'un.

2

Même plus simple sur la nouvelle version de selectize à l'aide des éléments de l'attribut. Fondamentalement, pour régler l'élément sélectionné, vous devez avoir d'abord dans les options. Mais si vous utilisez des données à distance, comme moi, les options sont vides de sorte que vous devez l'ajouter à deux endroits.
```
$('select').selectize({
        valueField: 'id',
        labelField: 'name',
        options:[{id:'123',name:'hello'}],
        items: ['123'],
        ...
```
C'est de travailler pour moi et m'a pris un certain temps pour comprendre... donc il suffit de partage

Vous devez vous connecter pour publier un commentaire.