¿Cómo obtener identificadores cuando se selecciona un valor en fcbkcomplete? - jsfiddle added

Question

Por favor revisa el siguiente violín. Estoy tratando de obtener los identificadores de los productos seleccionados en el cuadro fcbkcomplete y mostrarlos como valores separados por comas en el cuadro de texto con id="interest". Escribí una función para lograr eso, pero no funcionó. La función agrega el ID del primer valor y no toma los ID de los otros valores que se agregan en el cuadro de selección múltiple.

http://jsfiddle.net/balac/xDtrZ/1/

He añadido json.txt. que contiene Datas como este

[{"key":"2", "value":"Canon Powershot "},{"key":"3", "value":"Fastrack Bag"},{"key":"4", "value":"Iphone 4 "},{"key":"5", "value":"Levis Jeans"},{"key":"7", "value":"Indig"},{"key":"8", "value":"Dashing Cars"},{"key":"9", "value":"dsdas"},{"key":"10", "value":"fsfs"}] 

En la clave de valor JSON anterior es el ID de la que desea que aparezca en el cuadro de texto como valores separados por comas. valor es el valor que vendrá en el menú desplegable para la selección.

al seleccionar los valores en el menú desplegable, quiero que la clave correspondiente se agregue en el cuadro de texto como valores separados por comas.

El problema es que solo se agrega la clave del primer elemento seleccionado en el cuadro de texto, no importa.

Espero que sea específico y lo diga todo en detalle. si alguien quiere alguna aclaración por favor pregúnteme, le explicaré más.

Answer 1

Creo que encontré una solución más simple para usted. Tenga en cuenta, debido a los problemas que he mencionado en mis comentarios que tenía que simplificar drásticamente su código fcbkcomplete para que funcione ..

$(document).ready(function() { 
    $("#select3").fcbkcomplete({ 
     addontab: true, 
     maxitems: 10, 
     input_min_size: 0, 
     height: 10, 
     select_all_text: "select", 
     onselect: clicker 
    }); 
}); 

var clicker = function() { 
    var selected = new Array(); 

    $('option', this).each(function() { 
     selected.push($(this).val()); 
    }); 

    $('#interest').val(selected.join(', ')); 
}; 

See it in action here.

Nota: he tenido que añadir manualmente a <option>'s la lista select para obtener fcbkcomplete para que realmente funcione bien. Pero, sin embargo, mi lógica debería funcionar para usted de todos modos.

También, fcbkcomplete aparentemente cambia dinámicamente el id <option>'s a algo así como opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP, así que tuve que usar el valor en su lugar. Hay soluciones para eso si estás completamente configurado para usar el ID en lugar del valor.

Para ilustrar mi punto, modificar el bucle a través de cada opción de la siguiente manera:

$('option', this).each(function() { 
    for (var i = 0; i < this.attributes.length; i++) { 
     var pair = this.attributes[i].name + ': ' 
      + this.attributes[i].value; 
     alert(pair); 
    } 
    selected.push($(this).val()); 
}); 

Usted verá cómo los atributos terminan después fcbkcomplete carreras.

edición final

Después de su puesta en marcha en el servidor local y el uso de un archivo txt JSON, yo era capaz de replicar finalmente el problema que estaba teniendo. El hecho es que el comportamiento cambia totalmente cuando usa JSON en lugar de codificar el <option> s. Aquí está su solución de trabajo:

$(document).ready(function() { 
    var clicker = function(e) { 
     var selected = new Array(); 

     // using "this" here was out of context, use #select3 
     $('option', $('#select3')).each(function() { 
      selected.push(this.value); 
     }); 

     $('#interest').val(selected.join(', ')); 
    }; 

    $("#select3").fcbkcomplete({ 
     json_url: "parseJSON.txt", 
     addontab: true, 
     maxitems: 10, 
     input_min_size: 0, 
     height: 10, 
     select_all_text: "select", 
     onselect: clicker 
    }); 
}); 

Answer 2

El siguiente enlace es un ejemplo de cómo obtener el valor en fcbkcomplete en select. El mismo proceso que puede hacer para la identificación. https://github.com/emposha/FCBKcomplete/issues/110 ejemplo de cómo utilizar:

 
`//auto complete jquery starts here 
    $("#box").fcbkcomplete({ 
        width: 250, 
        addontab: true,     
        maxitems: 1, 
        input_min_size: 0, 
        height: 10, 
        cache: true, 
        filter_case: true, 
        filter_hide: true, 
        filter_selected: true, 
        newel: true, 
        filter_case:false, 
        onselect: function(item) 
        { 
         getting_value_dealer(item._value, item._id); 
        } 
       }); 
    //auto complete jquery ends here 
`