jQuery动态输入字段+自动完成功能无法正常工作（始终在第一次输入时触发）(jQuery dynamically input fields + autocomplete not working co

jQuery动态输入字段+自动完成功能无法正常工作（始终在第一次输入时触发）(jQuery dynamically input fields + autocomplete not working correctly (always firing at first input))

好的...感谢您的帮助，我设法解决了这些问题：

“自动完成动态创建的输入”

和

“jQuery dinamically输入字段不起作用”

然而，当我尝试将整个事情混合起来时，（动态输入+自动完成）事情就不会起作用了:-（现在，......我不能让它们都不起作用。这里的代码再一次......

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="javascript/jquery.autocomplete.css" /> <script type="text/javascript" src="javascript/jquery-2.1.0.min.js"></script> <script type='text/javascript' src='javascript/jquery.autocomplete.js'></script> <script type="text/javascript"> // Funcion Autocomplete de jQuery para buscar los clientes y los productos en el input con clase "buscar" y clase "buscar_prod" $(document).ready(function() { $("#buscar").autocomplete("get_client_list.php", { width : 260, matchContains : true, selectFirst : false }); }); $(document).ready(function() { $(".buscar_prod").autocomplete("get_product_list.php", { width : 260, matchContains : true, selectFirst : false }); }); $(document).ready(function() { $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); }); </script> <title>AQUATAP - Gestor de Información - Añadir Pedido</title> </head> <body> <form role="form" action="add_order.php" method="POST"> Cliente: <input type="text" name="cliente" id="buscar"> <br> <hr /> Fecha de salida: <br> <input type="radio" name="salida_pronosticada" value="male"> En el día <br> <input type="radio" name="salida_pronosticada" value="male"> 2 días <br> <input type="radio" name="salida_pronosticada" value="female"> 3 días <br> <input type="radio" name="salida_pronosticada" value="female"> 5 días <br> <input type="radio" name="salida_pronosticada" value="female"> 1 semana <br> <input type="radio" name="salida_pronosticada" value="female"> Otro <input type="text" name="salida_pronosticada_otro"> días <br> <hr /> <label>Stuff y cantidad</label> <div class="multi-field-wrapper"> <div class="multi-fields"> <div class="multi-field"> <input type="text" class="buscar_prod" name="input_referencia[]"> <input type="text" name="input_cantidad[]"> <button type="button" class="remove-field"> X </button> </div> </div> <button type="button" class="add-field"> Add field </button> <input type="submit" name="guardar" value="Guardar" /> </div> </form> </body>

再次......谢谢你的时间！

---- ---- EDITED

好的，..我添加了$(".buscar_prod").autocomplete("get_product_list.php", {width : 260, matchContains : true, selectFirst : false}); 后

$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();

现在，自动完成功能适用于添加的每个动态输入，但它始终在第一个输入中同时触发。我不介意如果我关注第二，第三，第四，（等）输入，第一个也会出现焦点并触发自动完成（见下图）

任何帮助非常感谢！谢谢！

Ok... thanks to your help, I manage to sort out these issues:

"autocomplete for dynamically created inputs"

and

"jQuery dinamically input fields not working"

Nevertheless, when I try to mix the whole thing up, (dynamic inputs + autocomplete) the thing just won't work :-( right now,.. I cannot get none of them working. Here's the code once again...

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="javascript/jquery.autocomplete.css" /> <script type="text/javascript" src="javascript/jquery-2.1.0.min.js"></script> <script type='text/javascript' src='javascript/jquery.autocomplete.js'></script> <script type="text/javascript"> // Funcion Autocomplete de jQuery para buscar los clientes y los productos en el input con clase "buscar" y clase "buscar_prod" $(document).ready(function() { $("#buscar").autocomplete("get_client_list.php", { width : 260, matchContains : true, selectFirst : false }); }); $(document).ready(function() { $(".buscar_prod").autocomplete("get_product_list.php", { width : 260, matchContains : true, selectFirst : false }); }); $(document).ready(function() { $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); }); </script> <title>AQUATAP - Gestor de Información - Añadir Pedido</title> </head> <body> <form role="form" action="add_order.php" method="POST"> Cliente: <input type="text" name="cliente" id="buscar"> <br> <hr /> Fecha de salida: <br> <input type="radio" name="salida_pronosticada" value="male"> En el día <br> <input type="radio" name="salida_pronosticada" value="male"> 2 días <br> <input type="radio" name="salida_pronosticada" value="female"> 3 días <br> <input type="radio" name="salida_pronosticada" value="female"> 5 días <br> <input type="radio" name="salida_pronosticada" value="female"> 1 semana <br> <input type="radio" name="salida_pronosticada" value="female"> Otro <input type="text" name="salida_pronosticada_otro"> días <br> <hr /> <label>Stuff y cantidad</label> <div class="multi-field-wrapper"> <div class="multi-fields"> <div class="multi-field"> <input type="text" class="buscar_prod" name="input_referencia[]"> <input type="text" name="input_cantidad[]"> <button type="button" class="remove-field"> X </button> </div> </div> <button type="button" class="add-field"> Add field </button> <input type="submit" name="guardar" value="Guardar" /> </div> </form> </body>

again... thanks for your time!

----EDITED----

Ok,.. I added $(".buscar_prod").autocomplete("get_product_list.php", {width : 260, matchContains : true, selectFirst : false}); after

$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();

Now, autocomplete works for each dynamic input added, but it fires at the same time in the first input always. It doesn't mind if I focus the second, third, fourth, (etc) input, the first one also appears to get a focus and fires the autocomplete (see image below)

Any help is very appreciated! Thanks!