twitter-bootstrap - personalizar - menu flotante bootstrap

Seleccione 2 menú desplegable, pero ¿permite nuevos valores por usuario?

Question

Quiero tener un menú desplegable con un conjunto de valores, pero también permitir que el usuario "seleccione" un nuevo valor que no figura en la lista.

Veo que select2 admite esto si lo está usando en modo tokens , pero ¿hay alguna forma de hacerlo sin tener tokens?

Answer 1

Como muchas de estas respuestas no funcionan en 4.0+, si está utilizando ajax, puede hacer que el servidor agregue el nuevo valor como una opción. Entonces funcionaría así:

1. El usuario busca el valor (lo que hace que la solicitud ajax al servidor)
2. Si el valor fue excelente, devuelve la opción. Si no es solo que el servidor añada esa opción como esta: [{"text":" my NEW option)","id":"0"}]
3. Cuando se envía el formulario, simplemente verifique si esa opción está en el archivo db y, si no, créelo antes de guardarlo.

Answer 2

Gracias por la ayuda chicos, utilicé el código de abajo en Codeigniter II estoy usando la versión: 3.5.2 de 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]''};
        }
    },
});

Answer 3

La excelente respuesta proporcionada por funciona para Select2 3.5.2 y siguientes, pero no funcionará en 4.0.0 .

Desde muy temprano (pero tal vez no tan pronto como esta pregunta), Select2 ha apoyado el "etiquetado": donde los usuarios pueden agregar su propio valor si se les permite. Esto se puede habilitar a través de la opción de tags , y puede jugar con un ejemplo en la documentación .

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

De manera predeterminada, esto creará una opción que tiene el mismo texto que el término de búsqueda que han ingresado. Puede modificar el objeto que se utiliza si está buscando marcarlo de una manera especial, o crear el objeto de forma remota una vez que se selecciona.

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

Además de servir como un indicador fácil de detectar en el objeto pasado a través del evento select2:select , la propiedad adicional también le permite representar la opción de forma ligeramente diferente en el resultado. Entonces, si quisieras señalar visualmente el hecho de que es una nueva opción colocando " (nuevo) " al lado, podrías hacer algo como esto.

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

Answer 4

Mejora en la respuesta @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

Answer 5

Solo por mantener el código con vida, publicaré jsfiddle.net/pHSdP/2 de jsfiddle.net/pHSdP/2 de su comentario .

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

Answer 6

Para la versión 4+ verifique esta respuesta a continuación por Kevin Brown

En Select2 3.5.2 y siguientes, puede 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};
    }
  },
});

(tomado de una respuesta en la lista de correo select2, pero no puede encontrar el enlace ahora)

Answer 7

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

En la mayoría de los casos, necesitamos comparar valores con registros insensibles. Y este código devolverá falso, lo que conducirá a la creación de registros duplicados en la base de datos. Además, el navegador Safary no admite String.prototype.localeCompare () y este código no funcionará en este navegador;

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

será mejor reemplazar a

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