Creating an item if not already exists in Selectize.js select box and ajax update the new added item

Question

I was using Selectize.js in a select box, What i need is, if an item is not in the list of options i would need to add a new item. When new item is added, i want to have an ajax call to update the newly added item to my database.

In their documentiation, it says that we can use "create" to have the selectize to add an item.

create - Allows the user to create a new items that aren't in the list of options. This option can be any of the following: "true" (default behavior), "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option.

But i am not able to understand how to use the call back here. can anyone help?

The following is an example of my content, the values are ids of the items in the db. I would like to have the new item added to db and returned with the value as id from db and populate and get selected in the select box.

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

Haroldson

Answer 1

Actually you must return an object with properties that match the names for your labelField and valueField options:

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

If you needed to perform a remote operation you would code it like this:

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

Tomkins

you need to put callback in the create function create: function (input, callback) – Cardigan

Good catch. Copy/paste typo. – Tomkins

Thanks for sharing this. How would one obtain an identifier for the select drop-down to which the new item was added? I would like to pass not only the new item value (stored in the "input" argument) but also the select identifier so that I can decide which database table to insert the new item into. Any pointers would be much appreciated. – Gutta

Hello. Thanks for sharing this code. I was able to reuse the code above and inserted a new item in my database table. But when i moved to another textbox control the value disappear and i had to select the newly added item. Just wondering if i missed something. – Essene

Link, can you post a gist or something that reproduces your problem? – Tomkins

Got the issue resolved after changing my code --> return callback({ 'CertificateTypeID': data[0].certificateTypeID, 'Certificate': data[0].Certificate }); – Essene

has to be callback({ value: result.id, text: input }); in latest selectize.js – Deckert

@link no solution worked for me. official documentation also is incorrect. The Issue it doesn't add the option or select it so when you blur out and refocus it calls load function and reloads the options. so i added and selected it manually. something like this should work for you as well create: function(input, callback) { let resp = await $.ajax({...}); this.addOption({value: resp, text: input}); this.setValue(resp); callback({value: resp, text: input}); } this. – Ronel

Answer 2

You have to invoke the callback, passing your values:

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

Semiliterate

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

Input

Answer 4

The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback){}

when we use asynchronous method us use the callback

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

When we use synchronous method

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

Yod