Autocompletado múltiple separado por comas en un campo

Estoy tratando de adaptar el siguiente código a mi aplicación. Múltiple Autocompletar jsfiddle El jsfiddle funciona: mi aplicación PHP no.

Mi aplicación es una aplicación Xataface basada en PHP a la que he agregado una página personalizada de creación de dispositivos móviles. Quiero obtener la lista de sugerencias de mysql.

Funciona bien para la primera sugerencia y luego aparece en la coma.

EL PROBLEMA: El problema es que en mi aplicación no muestra una lista de sugerencias para la segunda entrada (después de la coma).

He realizado muchas búsquedas en Google y no veo páginas relevantes que puedan ayudarme.

¿Alguien puede ayudarme a hacer que esto muestre la lista de sugerencias para la segunda y posteriores entradas al campo?

A continuación está mi código …

Mi forma es la siguiente:

   Create Form Mobile 9          // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ initialize validation plugin jquery.validate.min.js $(document).on("pageshow", "#create9Page", function() { $("#cform9").validate(); });  $(function() { function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#tagsf2").autocomplete({ //reference: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/ minLength: 1, source: "actions/tags.php", 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; } }); });      
    <!-- -->
    <input type="hidden" name="urlsave" value="" />

    Mi archivo tags.php es el siguiente ..

     <?php require_once "configphp.dbc"; $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql'); mysql_select_db($dbname); $return_arr = array(); /* If connection to database, run sql statement. */ if ($conn) { $fetch = \mysql_query("SELECT * FROM nte_tags where tags_list like '%" . mysql_real_escape_string($_GET['term']) . "%'"); /* Retrieve and store in array the results of the query. */ while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { $row_array['tags_id'] = $row['tags_id']; $row_array['value'] = $row['tags_list']; //$row_array['abbrev'] = $row['abbrev']; array_push($return_arr, $row_array); } } /* Free connection resources. */ //mysql_close($conn); /* Toss back results as json encoded array. */ echo json_encode($return_arr); 

    Capturas de pantalla:

    • La primera lista de sugerencias muestra OK.jpg

    La primera lista de sugerencias muestra OK.jpg

    • La lista de sugerencias para la segunda entrada no se muestra.jpg

    la lista de sugerencias para la segunda entrada no se muestra.jpg

    A medida que leía más y buscaba más, encontré código de autocompletado múltiple remoto en el sitio web de jquery ui. Es curioso cómo puede buscar y leer durante mucho tiempo y no encontrarse con información útil obvia.

    Sitio web de jquery ui .. http://jqueryui.com/autocomplete/#multiple-remote

    Usé el código de ejemplo a continuación y lo edité para adaptarlo a mi aplicación.

    Funciona ahora y resolvió mi problema en mi aplicación.

     $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // 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( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // custom minLength var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, 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; } }); });