Jquery: Autocomplete con multiples valores (casi aporte)

[Bam_Margera]

Hola!

recientemente he conseguido hacer funcionar jquery autocomplete pasandole vía php un array con los valores.

Me funciona bien, pero me gustaría, que cuando el usuario seleccione una de las sugerencias se agregue una ',' y que se active el autocomplete de nuevo...

cómo podría hacerlo? se que es en la función 'select' pero no entiendo como va, he mirado la docu de jquery ui pero el source es muy diferente al mio...

este es mi código:

Código PHP:

  <? 
$a = new etiqueta(0, ''); 
$b = $a->autocomplete_etiquetas(); 
?> 
<script type="text/javascript"> 
    function cargar_autocomplete_etiquetas(){ 
    $("#tags").autocomplete({ 
        source: [<? echo $b; ?>], 
        multiple: true, 
        multipleSeparator: ", ", 
        matchContains: true 
    }); 
} 
 
</script>  

Notese que el multiple: true y las dos lineas siguientes son pruebas... el autocomplete sigue funcionando pero no para la segunda palabra o elemento... :(

alguna idea?

muchas gracias!

[mayid]

Creo que estas buscando un tokenizer. Que en su implementacion genera unas cajitas con una x, como en facebook. Pero tienen un html complicado.

Si lo que estas buscando es solo una simple coma, podes modificar el script para que tras el key up se divida la cadena por comas (en un array). Luego, aplicando array_pop quitás el último elemento y ese es el que envias a PHP.

[Bam_Margera]

hola, gracias por tu respuesta!

lo que quiero exactamente es que al seleccionar una etiqueta, el autocomplete se active de nuevo para la proxima etiqueta (mismo input), nosé si me explico

[4ng3r]

Mire este ejemplo usando JQuery UI http://jqueryui.com/demos/autocomplete/#multiple

Código HTML:

<meta charset="utf-8">
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        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 ).data( "autocomplete" ).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( ", " );
                    return false;
                }
            });
    });
    </script>
 
 
 
<div class="demo">
 
<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50" />
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->
 

[Bam_Margera]

entonces la idea es pasarle mi $b donde pone 'availableTags' ?

[4ng3r]

si, lo unico que guarda availableTags es un arreglo con las palabras a autocompletar.