Créer un élément s'il n'existe pas déjà dans la boîte de sélection Selectize.js et ajax mettre à jour le nouvel élément ajouté

J'ai été en utilisant Selectize.js dans une boîte de sélection, Ce que je besoin est, si un élément n'est pas dans la liste des options que j'aurais besoin d'ajouter un nouvel élément. Lorsqu'un nouvel élément est ajouté, je veux avoir un appel ajax pour mettre à jour le nouvel élément à ma base de données.

Dans leur documentiationil est dit que nous pouvons utiliser "créer" pour avoir la selectize pour ajouter un élément.

créez - Permet à l'utilisateur de créer de nouveaux éléments qui ne sont pas dans la liste des options. Cette option peut être l'un des suivants: "true" (comportement par défaut), le "faux" (désactivé), ou une fonction qui accepte deux arguments: "entrée" et "rappel". La fonction de rappel doit être appelé avec les données définitives pour l'option.

Mais je ne suis pas en mesure de comprendre comment utiliser l'appel de retour ici. quelqu'un peut-il aider?

Voici un exemple de mon contenu, les valeurs sont les id des éléments dans la db. Je voudrais avoir le nouvel élément ajouté dans la base de données et retourne la valeur de l'id de db et de le remplir et d'être sélectionné dans la boîte de sélection.

<select name="fruits" id="fruits" placeholder="Select a fruit" >
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Mango</option>
    <option value="4">Grape</option>
</select>

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){

           }
        });
    });
</script>

source d'informationauteur mtsandeep

  1. 19

    En fait, vous devez retourner un objet avec des propriétés qui correspondent aux noms pour votre labelField et valueField options:

    <script>
    $(function(){
        $('#fruits').selectize({
            create:function (input){
               return { value:123, text:input};
           }
        });
    });
</script>

    Si vous avez besoin d'effectuer une opération à distance vous devez écrire le code comme ceci:

    <script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){
                $.ajax({
                    url: '/remote-url/',
                    type: 'GET',
                    success: function (result) {
                        if (result) {
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });
</script>
  2. 5

    Vous devez appeler la fonction de rappel, en passant vos valeurs: 

    $('#fruits').selectize({
    create:function (input, callback){
        callback({
            value: 123, //probably your ID created or something
            text: input
        });
    }
});
  3. 0
    Thanks a lot, @Corgalore. Its working for me like
$(function(){
        $('#desig').selectize({
            create:function (input, callback){
                $.ajax({
                    url: "<?php  echo $this->url(null, array('controller' => 'employee-detail', 'action' => 'add-new-desig-ajax'));?>",
                    type: 'POST',
                    data:{'designation':input},
                    success: function (result) {
                        if (result) {
//                           console.log('sdfasf',result);
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });