autocomple multiple de jquery

wilmer30 · #1 (**permalink**) 19/06/2013, 14:52

Hola:

Necesito cargar en un textarea autocomplet multiple pero en ves de llevar los nombres cargados, requiero llevar los id de cada nombre, logré agarrar el id del último nombre cargado con el autocomplete, he imagino que para cargar el resto debería generarme un bucle que me baya agregando a cada vectos o JSON el valor de cada nombre al seleccionar, una ves cargado todos lo nombres enivar sus ids como vecto o cualquier otro formato a un hidden de mi formulario, lo que no se es cómo realizar esta accions de cargado de los ids en un vecto u otro medio.

Código HTML:

Ver original<script>
    $(function() {
        var availableTags = [
            {"label":"ActionScript de la vida",     "value":"ActionScript", "id":1},
            {"label":"AppleScript",     "value":"AppleScript",  "id":2},
            {"label":"Asp",             "value":"Asp",          "id":3},
            {"label":"BASIC",           "value":"BASIC",        "id":4},
            {"label":"C",               "value":"C",            "id":5},
            {"label":"C++",             "value":"C++",          "id":6},
            {"label":"Clojure",         "value":"Clojure",      "id":7},
            {"label":"COBOL",           "value":"COBOL",        "id":8},
            {"label":"ColdFusion",      "value":"ColdFusion",   "id":9},
            {"label":"Erlang",          "value":"Erlang",       "id":10},
            {"label":"Fortran",         "value":"Fortran",      "id":11},
            {"label":"Groovy",          "value":"Groovy",       "id":12},
            {"label":"Haskell",         "value":"Haskell",      "id":13},
            {"label":"Java",            "value":"Java",         "id":14},
            {"label":"JavaScript",      "value":"JavaScript",   "id":15},
            {"label":"Lisp",            "value":"Lisp",         "id":16},
            {"label":"Perl",            "value":"Perl",         "id":17},
            {"label":"PHP",             "value":"PHP",          "id":18},
            {"label":"Python",          "value":"Python",       "id":19},
            {"label":"Ruby",            "value":"Ruby",         "id":20},
            {"label":"Scala",           "value":"Scala",        "id":21},
            {"label":"Scheme",          "value":"Scheme",       "id":22},
        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
 
        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).autocomplete( "instance" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    $('#hiddenAllowSearch').val(ui.item.id);
                    return false;
                }
            });
            $('#button').click(function() {
                alert($('#hiddenAllowSearch').val());
            });
    });
    </script>
</head>
<body>
<form>
<textarea id="tags"></textarea>
<input type="submit" id="button" value="enviar"/>
<input type="hidden" id="hiddenAllowSearch" name="language[]"/>
</form>

Por favor si pueden ayudarme