jquery - how - Crear un elemento si aún no existe en el cuadro de selección Selectize.js y ajax actualizar el nuevo elemento agregado

selectize on change

Question

Estaba utilizando Selectize.js en un cuadro de selección. Lo que necesito es que, si un elemento no está en la lista de opciones, necesitaría agregar un nuevo elemento. Cuando se agrega un nuevo elemento, quiero tener una llamada ajax para actualizar el nuevo elemento agregado a mi base de datos.

En su documentiation , dice que podemos usar "crear" para tener la opción de seleccionar para agregar un elemento.

crear: permite al usuario crear nuevos elementos que no están en la lista de opciones. Esta opción puede ser cualquiera de las siguientes: "verdadero" (comportamiento predeterminado), "falso" (deshabilitado), o una función que acepta dos argumentos: "entrada" y "devolución de llamada". La devolución de llamada debe invocarse con los datos finales de la opción.

Pero no puedo entender cómo usar la llamada aquí. ¿Alguien puede ayudar?

El siguiente es un ejemplo de mi contenido, los valores son identificadores de los elementos en la base de datos. Me gustaría tener el nuevo elemento agregado a db y devuelto con el valor como id desde db y completar y seleccionar en el cuadro de selección.

<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>

Answer 1

En realidad, debe devolver un objeto con propiedades que coincidan con los nombres de sus opciones labelField y valueField:

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

Si necesitaras realizar una operación remota, deberías codificarlo así:

<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>

Answer 2

Tienes que invocar la devolución de llamada, pasando tus valores:

$(''#fruits'').selectize({
    create:function (input, callback){
        callback({
            value: 123, // probably your ID created or something
            text: input
        });
    }
});

Answer 3

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