Создание элемента, если оно еще не существует, в поле выбора Selectize.js и ajax обновить новый добавленный элемент

Я использовал Selectize.js в поле выбора. Что мне нужно, если элемент отсутствует в списке параметров, мне нужно будет добавить новый пункт. Когда новый элемент добавлен, я хочу иметь ajax-вызов для обновления недавно добавленного элемента в моей базе данных.

В своем документировании говорится, что мы можем использовать "create", чтобы иметь возможность выбирать элемент.

create - Позволяет пользователю создавать новые элементы, которые не входят в список параметров. Этот параметр может быть любым из следующих: "true" (поведение по умолчанию), "false" (отключено) или функция, которая принимает два аргумента: "enter" и "обратный вызов". Обратный вызов должен быть вызван с окончательными данными для параметра.

Но я не могу понять, как использовать обратный звонок здесь. может ли кто-нибудь помочь?

Ниже приведен пример моего содержимого, значения - идентификаторы элементов в db. Я хотел бы, чтобы новый элемент был добавлен в db и возвращался со значением id из db и заполнялся и выбирался в поле выбора.

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

Ответ 1

На самом деле вы должны вернуть объект со свойствами, которые соответствуют именам ваших опций labelField и valueField:

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

Если вам нужно выполнить удаленную операцию, вы бы закодировали ее так:

<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

Вы должны вызвать обратный вызов, передавая свои значения:

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

Ответ 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 });
                        }
                    }
                });
            }
        });
    });