如果在Selectize.js选择框中不存在，则创建一个项目，然后ajax更新新添加的项目

Question

我在一个选择框中使用Selectize.js，我需要的是，如果一个项目不在选项列表中，我需要添加一个新项目。当新项目被添加，我想有一个ajax调用更新新添加的项目到我的数据库。

在他们的文档中，它说我们可以使用"create"来选择添加项。

create -允许用户创建一个不在选项列表中的新项目。该选项可以是以下任意选项:"true"(默认行为)，"false"(禁用)，或者一个接受两个参数的函数:"input"one_answers"callback"。回调函数应该使用该选项的最终数据来调用。

但是我不明白如何在这里使用调用。有人能帮忙吗?

下面是我的内容的一个例子，值是db中项目的id。我想有新的项目添加到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>

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

Answer 2

您必须调用回调，传递您的值:

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

Answer 4

函数有两种形式:同步(带签名函数(输入){}或异步(带签名函数(输入，回调){}

当我们使用异步方法时我们使用回调

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){
                //we return the callback that expects us to pass the parameters 
                //to it when the ajax finishes
                if (!input.length) return callback();
                $.ajax({
                    url: '/remote-url/',
                    type: 'GET',
                    success: function (result) {
                        if (result) {
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });
</script>

当我们使用同步方法 时

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