Seleziona2 menu a discesa ma consenti nuovi valori dall'utente?

Voglio avere un menu a discesa con una serie di valori, ma anche consentire all'utente di "selezionare" un nuovo valore non elencato lì.

Vedo che select2 lo supporta se lo stai usando in tagsmodalità, ma c'è un modo per farlo senza usare i tag?

Per la versione 4+ controlla questa risposta di seguito da Kevin Brown

In Select2 3.5.2 e versioni precedenti, puoi usare qualcosa come:

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

(tratto da una risposta sulla mailing list select2, ma non riesco a trovare il link ora)

L' eccellente risposta fornita da @fmpwizard funziona per Select2 3.5.2 e versioni precedenti , ma non funzionerà in 4.0.0 .

Fin dall'inizio (ma forse non già a questa domanda), Select2 ha supportato il "tagging": dove gli utenti possono aggiungere il proprio valore se glielo permetti. Questo può essere abilitato tramite l' tagsopzione e puoi giocare con un esempio nella documentazione .

$("select").select2({
  tags: true
});

Per impostazione predefinita, questo creerà un'opzione che ha lo stesso testo del termine di ricerca che hanno inserito. È possibile modificare l'oggetto che viene utilizzato se si desidera contrassegnarlo in modo speciale o creare l'oggetto in remoto una volta selezionato.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

Oltre a fungere da flag facile da individuare sull'oggetto passato attraverso l' select2:selectevento, la proprietà extra consente anche di rendere l'opzione leggermente diversa nel risultato. Quindi, se volessi segnalare visivamente il fatto che si tratta di una nuova opzione mettendo " (nuovo) " accanto ad essa, potresti fare qualcosa del genere.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

Solo per mantenere vivo il codice, sto postando il codice di @rrauenza Fiddle dal suo commento .

HTML

<input type='hidden' id='tags' style='width:300px'/>

jQuery

$("#tags").select2({
    createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

Poiché molte di queste risposte non funzionano in 4.0+, se stai usando ajax, potresti fare in modo che il server aggiunga il nuovo valore come opzione. Quindi funzionerebbe in questo modo:

1. L'utente cerca il valore (che invia una richiesta ajax al server)
2. Se il valore è ottimo, restituisci l'opzione. In caso contrario, chiedi al server di aggiungere quell'opzione in questo modo:[{"text":" my NEW option)","id":"0"}]
3. Quando il modulo viene inviato, controlla se questa opzione è nel db e in caso contrario creala prima di salvare.

Penso che ora ci sia una soluzione migliore

impostare semplicemente la codifica su true nelle opzioni di selezione?

tags: true

da https://select2.org/tagging

Miglioramento della risposta @fmpwizard:

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
  if ( $(data).filter( function() {
    return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
  }).length===0) {
    return {id:term, text:term};
  }
},

//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

Mi sono appena imbattuto in questo da Kevin Brown. https://stackoverflow.com/a/30019966/112680

Tutto quello che devi fare v4.0.6è usare il tags: trueparametro.

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

Nella maggior parte dei casi è necessario confrontare i valori con il registro insensibile. E questo codice restituirà false, il che porterà alla creazione di record duplicati nel database. Inoltre String.prototype.localeCompare () non è supportato dal browser Safary e questo codice non funzionerà in questo browser;

return this.text.localeCompare(term)===0;

sarà meglio sostituire a

return this.text.toLowerCase() === term.toLowerCase();

Grazie per l'aiuto ragazzi, ho usato il codice seguente all'interno di Codeigniter II sto usando la versione: 3.5.2 di select2.

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
    ajax: {
        url: location_url,
        dataType: 'json',
        quietMillis: 100,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            results = [];
            $.each(data, function(index, item){
                results.push({
                    id: item.location_id,
                    text: item.location_name
                });
            });
            return {
                results: results
            };
        }
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, results) {
        if ($(results).filter( function() {
            return term.localeCompare(this.text)===0; 
        }).length===0) {
            return {id:term, text:term + ' [New]'};
        }
    },
});