Autocompleter + AJAX + live() ? JQUERY!

[topikito]

Hola chicos,

He indagado en google y a posteriori en el foro, pero no encuentro lo que busco. Tengo un par de dudas, así que iré por pasos:

1º.- Estoy empezando con JQuery y estoy intentando poner un AutoCompleter. Aquí surge la primera duda/problema. Estoy usando la última versión de JQuery (1.4) con JQuery UI (1.8). He buscado en internet y encontré un [URL="http://www.pengoworks.com/workshop/jquery/autocomplete.htm"]AutoCompleter[/URL] que "va" (simplemente). Sin embargo, por las versiones de JQuery que cita, creo que no es muy reciente. No obstante, este Autocompleter me funciona (aunque tengo un problema que detallo en el segundo punto). Indagando más (ya que no me gusta mucho el funcionamiento: no es muy exacto) encontré que JQuery UI tiene un AutoCompleter, pero no creo que no funciona con AJAX (en la docs de jquery sólo ponen Arrays, nada de URLs de backend ni nada). He buscando más, y he encontrado más Autocompleters, pero ya no sé ni de cuando son (2007,2008,2009). Entonces, si alguno tiene alguna sugerencia de algún AutoCompleter que vaya bien. (En este foro hay un par de entradas sobre Autocompleters, pero no son recientes)

2º.- Tengo un formuario en el que puedes introducir una lista de productos (nombre, cantidad, precio) y para hacerlo dinámico, puedes hacer click en un enlace "más" para ir añadiento más productos. Todo OK hasta aquí. Sin embargo, como en el momento de la creación del documento no están creados los inputs, no se crean eventos DOM para los que se van añadiendo a posteriori. He buscado y he encontrado que hay que usar la función live. Sin embargo, la uso, pero no me recarga los DOM al momento de introducir los campos. No sé si lo estoy haciendo bien, puesto que, como dije, soy novato en JQuery.

Aquí tienen el código por si alguien sabe de que hablo.

JS:

Código Javascript:

$(document).ready(function (){
 
    $(".autoComplete").autocomplete("http://wwwsandbox/facturas/getNames.php", {selectFirst: true, autoFill: true, minChars: 4, lineSeparator: ';;' });
 
 
    $(function() { // when document has loaded
            var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
 
            $('a#moreFields').live('click',function() { // when you click the add link
                    $('<tr id="input'+i+'"><td><input class="autoComplete" type="text" value="" name="producto[]" /></td><td><input type="text" value="" name="cantidad[]" /></td><td><input type="text" value="" name="precio[]" /></td></tr>').appendTo('#productos'); // append (add) a new input to the document.
                    i++;
                    return false;
            });
 
            $('a#lessFields').click(function() { // similar to the previous, when you click remove link
                if(i > 1) { // if you have at least 1 input on the form
                        $('#input'+(i-1)).remove(); //remove the last input
                        i--;
                        return false;
                }
            });
    });
});
 

PHP:

Código HTML:

 <form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
           <h2>Datos de la factura</h2>
           <p>Factura: <input type="text" value="" name="numFactura" /></p>
           <table id="productos">
               <tr>
                   <td>Producto</td>
                   <td>Cantidad</td>
                   <td>Precio</td>
               </tr>
               <tr>
                   <td><input class="autoComplete" type="text" value="" name="producto[]" /></td>
                   <td><input type="text" value="" name="cantidad[]" /></td>
                   <td><input type="text" value="" name="precio[]" /></td>
               </tr>
           </table>
           <p><a href="#" id="moreFields">Más</a> | <a href="#" id="lessFields">Menos</a></p>
           <h3>Gastos adicionales</h3>
           <p>Igic: <input type="text" name="igic" /></p>
           <p>Aduana: <input type="text" name="aduana" value="12"/></p>
           <p>Paquete Extra: <input type="text" name="paqueteExtra" /></p>
           <p>Descuento: <input type="text" name="descuento" /></p>
           <p><input type="submit" value="Enviar" /></p>
       </form> 

[Dany_s]

pero para agregar nuevos campos no hace falta el evento live, no hace falta para crearlos
si no funciona el autocompleter es porque no tiene el live pero igual probá asignandole el plugin al crearlos

Código Javascript:

$('a#moreFields').click(function() { // when you click the add link
            $('<tr id="input'+i+'"><td><input class="autoComplete" type="text" value="" name="producto[]" /></td><td><input type="text" value="" name="cantidad[]" /></td><td><input type="text" value="" name="precio[]" /></td></tr>').appendTo('#productos'); // append (add) a new input to the document.
            $('tr:last').find('input.autoComplete').autocomplete("http://wwwsandbox/facturas/getNames.php", {selectFirst: true, autoFill: true, minChars: 4, lineSeparator: ';;' });
            i++;
            return false;
        });
 

ahi cuando agregar el input a la tabla busco el último input con clase autoComplete (o sea el que agregué) y le asigno el autocompleter

[topikito]

Muchísimas gracias! Ya funciona :D