Creazione di un elemento se non esiste già nella casella di selezione Selectize.js e ajax aggiorna il nuovo elemento aggiunto

Question

Stavo usando Selectize.js in una casella di selezione, Quello che mi serve è, se un elemento non è nella lista delle opzioni avrei bisogno per aggiungere un nuovo elemento. Quando viene aggiunto un nuovo elemento, voglio avere una chiamata Ajax per aggiornare l'elemento appena aggiunto al mio database.

Nel loro documentiation, si dice che possiamo usare "crea" per avere la selezione per aggiungere un elemento.

creazione: consente all'utente di creare nuovi elementi che non sono nell'elenco delle opzioni. Questa opzione può essere una delle seguenti: "true" (comportamento predefinito), "false" (disabilitato) o una funzione che accetta due argomenti: "input" e "callback". Il callback deve essere invocato con i dati finali per l'opzione.

Ma non sono in grado di capire come utilizzare la richiamata qui. qualcuno può aiutare?

Quanto segue è un esempio del mio contenuto, i valori sono id degli articoli nel db. Mi piacerebbe avere il nuovo elemento aggiunto a db e restituito con il valore come id da db e popolato e viene selezionato nella casella di selezione.

<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

In realtà è necessario restituire un oggetto con proprietà che corrispondono ai nomi per il vostro labelField e opzioni ValueField:

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

Se fosse necessario eseguire un'operazione remota, la si codificherebbe in questo modo:

<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

È necessario richiamare il callback, passando i tuoi valori:

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