Question

我在选择框中使用Selectize.js，我需要的是，如果某个项目不在我需要添加新项目的选项列表中。添加新项目时，我希望进行ajax调用以将新添加的项目更新到我的数据库。

在他们的documentiation中，它表示我们可以使用＆＃34;创建＆＃34;进行选择以添加项目。

create - 允许用户创建不在选项列表中的新项目。此选项可以是以下任何一项：＆＃34; true＆＃34; （默认行为），＆＃34; false＆＃34; （禁用），或接受两个参数的函数：＆＃34;输入＆＃34;和＃34;回调＆＃34;。应该使用选项的最终数据调用回调。

但是我无法理解如何在这里使用回叫。有人可以帮忙吗？

以下是我的内容示例，值是db中项目的ID。我想将新项目添加到db并返回值为db的id并填充并在选择框中选中。

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

如果Selectize.js中尚未存在项目，则选择框并且ajax会更新新添加的项目

4 个答案: