Selecione o menu suspenso 2, mas permite novos valores por usuário?

Quero ter uma lista suspensa com um conjunto de valores, mas também permitir que o usuário "selecione" um novo valor não listado lá.

Vejo que o select2 suporta isso se você o estiver usando no tagsmodo, mas existe uma maneira de fazê-lo sem usar tags?

Para a versão 4+, verifique esta resposta abaixo por Kevin Brown

No Select2 3.5.2 e abaixo, você pode usar algo como:

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

(extraído de uma resposta na lista de distribuição select2, mas não consegue encontrar o link agora)

A excelente resposta fornecida pelo @fmpwizard funciona para o Select2 3.5.2 e inferior, mas não funciona no 4.0.0 .

Desde muito cedo (mas talvez não tão cedo quanto essa pergunta), o Select2 oferece suporte à "marcação": onde os usuários podem adicionar seu próprio valor, se você permitir. Isso pode ser ativado através da tagsopção, e você pode brincar com um exemplo na documentação .

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

Por padrão, isso criará uma opção que possui o mesmo texto que o termo de pesquisa que eles inseriram. Você pode modificar o objeto usado se estiver procurando marcá-lo de uma maneira especial ou criar o objeto remotamente depois que ele for selecionado.

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

Além de servir como um sinalizador fácil de detectar no objeto transmitido pelo select2:selectevento, a propriedade extra também permite que você renderize a opção de maneira um pouco diferente no resultado. Portanto, se você deseja sinalizar visualmente o fato de que é uma nova opção colocando " (novo) " ao lado, você pode fazer algo assim.

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

Apenas para manter o código ativo, estou postando o código de @rrauenza Fiddle a partir do seu comentário .

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

Como muitas dessas respostas não funcionam na versão 4.0 ou superior, se você estiver usando o ajax, o servidor poderá adicionar o novo valor como uma opção. Portanto, funcionaria assim:

1. O usuário procura por valor (o que faz ajax solicitar ao servidor)
2. Se o valor for ótimo, retorne a opção Se não, basta que o servidor acrescente essa opção da seguinte forma:[{"text":" my NEW option)","id":"0"}]
3. Quando o formulário é enviado, verifique se essa opção está no banco de dados e, se não estiver, crie-a antes de salvar.

Existe uma solução melhor, eu acho agora

basta definir a marcação como true nas opções selecionadas?

tags: true

de https://select2.org/tagging

Melhor na resposta @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

Eu acabei de encontrar isso com Kevin Brown. https://stackoverflow.com/a/30019966/112680

Tudo o que você precisa fazer v4.0.6é usar o tags: trueparâmetro

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

Na maioria dos casos, precisamos comparar valores com registro insensível. E esse código retornará false, o que levará à criação de registros duplicados no banco de dados. Além disso, String.prototype.localeCompare () não é suportado pelo navegador Safary e este código não funcionará neste navegador;

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

substituirá melhor a

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

Obrigado pela ajuda pessoal, usei o código abaixo no Codeigniter II estou usando a versão: 3.5.2 of 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]'};
        }
    },
});