18

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>
mtsandeep
  • 310
  • 1
  • 3
  • 11

4 Answers4

26

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>
Corgalore
  • 2,486
  • 2
  • 23
  • 32
  • you need to put `callback` in the create function `create: function (input, callback)` – ghiotion Sep 10 '15 at 01:27
  • Good catch. Copy/paste typo. – Corgalore Sep 10 '15 at 21:23
  • 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. – w5m Apr 15 '16 at 17:13
  • 3
    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. – Link Jul 04 '16 at 09:37
  • Link, can you post a gist or something that reproduces your problem? – Corgalore Jul 08 '16 at 16:38
  • Got the issue resolved after changing my code --> return callback({ 'CertificateTypeID': data[0].certificateTypeID, 'Certificate': data[0].Certificate }); – Link Aug 01 '16 at 06:22
  • 1
    has to be callback({ value: result.id, text: input }); in latest selectize.js – Igor Yalovoy Mar 02 '17 at 16:16
  • @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. – vaibhav3027 Sep 27 '21 at 19:07
5

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
        });
    }
});
Luis Dalmolin
  • 3,416
  • 1
  • 18
  • 24
0
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 });
                        }
                    }
                });
            }
        });
    });
Pankaj
  • 169
  • 2
  • 11
0

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>
TheNewTime
  • 1