Opción añadir dinámicamente al plugin elegido JQuery de selección múltiple

Question

Quiero agregar el texto que un usuario ingresa en el campo de texto de una entrada de selección múltiple seleccionada como una opción, y seleccionarlo automáticamente, todo esto cuando la opción no lo hace existe, si la opción existe, entonces me gustaría seleccionarla. Hasta ahora he llegar a hacer esto:

Chosen.prototype.add_text_as_option = function() { 
    $('#id_select').append(
     $('<option>') 
       .html(this.search_field.val()) 
       .attr('selected', 'selected') 
       .attr('value', 0) 
    ); 
    $('#id_select').trigger("liszt:updated"); 
    return false; 
}; 

que llamo esta función cada vez que los usuarios entran en prensas mientras que el campo de entrada está en el foco dentro de la función keydown_check.

Tengo dos problemas:

• la máxima prioridad, cuando el usuario presiona entran y ha escrito una subcadena de una opción, la opción de no ser seleccionado, pero se añade el texto subcadena y seleccionados. No es lo que quiero

Por ejemplo: Si tengo la opción "foo", y comienza a escribir "fo", elegido será la primera opción como candidato ("foo"), por lo que si pulsa ENTER, cabe seleccionado , pero en cambio, lo que sucede es que se agrega "fo" como una opción y se selecciona, cuando realmente quería seleccionar "foo".

Si selecciono "foo" con un clic, todo funciona bien. La opción seleccionada se selecciona y el texto de la subcadena se toma como parte de la opción.

¿Cómo puedo agregar una opción inexistente a elegida, sin perder toda la funcionalidad original?

• ¿Cómo puedo acceder al selecto campo múltiple que inicié con el que elegí dentro del complemento elegido? Como puede ver en el código anterior, la identificación del campo múltiple de selección está codificada. Quiero hacer esto para poder actualizar la selección cuando el usuario agrega una nueva opción.

• La funcionalidad que estoy buscando es muy similar al widget habilidades de linkedin

Gracias de antemano!

Answer 1

Debe probar el complemento select2 que se basa en el plugin elegido, pero funciona bien con la adición de elementos de forma dinámica.

Aquí está el enlace: http://ivaynberg.github.com/select2/

Mira el ejemplo de auto-tokenización creo que podría ser lo que buscas.

Answer 2

a llamarlo keyup_check keydown_check se llama antes de la letra presionada se inicializa a diferencia keyup_check

Answer 3

Necesitaba esto hoy, así que escribió algo como esto:

$(function() { 
    // form id 
    $('#newtag').alajax({ 
     // data contains json_encoded array, sent from server 
     success: function(data) { 
      // this is missing in alajax plugin 
      data = jQuery.parseJSON(data); 
      // create new option for original select 
      var opt = document.createElement("OPTION"); 
      opt.value = data.id; 
      opt.text = data.name; 
      opt.selected = true; 
      // check if the same value already exists 
      var el = $('#tags option[value="' + opt.value + '"]'); 
      if(!el.size()) { 
       // no? append it and update chosen-select field 
       $('#tags').append(opt).trigger("chosen:updated"); 
      } else { 
       // it does? check if it's already selected 
       if(!el[0].selected) { 
        // adding already existent element in selection 
        el[0].selected = true; 
        $('#tags').trigger("chosen:updated"); 
       } else { 
        alert("Already selected and added."); 
       } 
      } 


     } 
    }) 
}); 

"#" newtag es una forma , ".alajax" es un plugin que envía datos de formulario de manera asíncrona y devuelve la respuesta del servidor en formato JSON. En el controlador, verifico si existe una etiqueta; de lo contrario, la creo. En respuesta, cinco objetos de etiqueta "jsoned".

Answer 4

Creé un jsfiddle de jquery elegido que toma texto y crea como opción.En la versión anterior de jquery elegida, tiene la opción de crear facilidad.

create_option: true; 
persistent_create_option: true; 
skip_no_results: true; 

Puede utilizar este código:

$('#id_select').chosen({ 
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true 
}); 

enlace jsFiddle: https://jsfiddle.net/n4nrqtek/

Answer 5

me encontré con un múltiplo solución seleccionar

var str_array = ['css','html']; 
$("#id_select").val(str_array).trigger("chosen:updated");