jQuery UI automatische Vervollständigung auf mehreren Zeilen mit .clone erstellt () Methode

Question

Ich bin fast neu zu jQuery ... Ich fand einige Tutorials / Beiträge zu erklären 1. wie eine Tabellenzeile klonen (nützlich für die Rechnungsdaten einfügen): http://forum.jquery.com/topic/validate-will-not-submit-to-server 2. wie die jQuery UI zum automatischen Vervollständigung verwenden, um mit PHP und MySQL (nützlich für Produkte aus einer DB-Tabelle und vermeiden Typisierung alles abrufen): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php- und-mysql /

Nun, ‚til jetzt kann ich Tabellenzeilen klonen und ich kann autocmplete Arbeit in der ersten Reihe, aber Probleme entstehen, wenn ich eine neue Zeile hinzufügen, und ich erwarte, dass es die Arbeit der automatische Vervollständigung auch Ich fand einen Thread hier in Stackoverflow (http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically-generated-textboxes), hatte aber kein Glück zu meinem Fall der Anwendung ...

Und nun der Code:

Der HTML-Teil

<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
 <thead>
  <tr>
   <th scope="col">Codice</th>
   <th scope="col">Nome</th>
   <th scope="col">Quantità</th>
   <th scope="col">Unità di misura</th>
   <th scope="col">Costo U.</th>
   <th scope="col">Totale</th>
  </tr>
 </thead>
 <tbody>
  <tr id="row_0" class="iterable">
   <td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
   <td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
   <td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
   <td>&nbsp;</td>
   <td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<ul>
 <li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
 <li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
 <li><input type="submit" name="button" id="button" value="Salva tutto" /></li>
</ul>

Das jQuery Teil

    function addrow(destination) {
     rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
     clonecopy = destination.clone(true);
     clonecopy.attr("class","iterable");
     // update numerical suffixes
     clonecopy.attr("id","row_"+rowcount);
     clonecopy.find('.sku, .name').val('');
     clonecopy.find("input[name^='det_sku']").attr({
      "name": "det_sku_"+rowcount,
      "id": "det_sku_"+rowcount
     });
     clonecopy.find("input[name^='det_name']").attr({
      "name": "det_name_"+rowcount,
      "id": "det_name_"+rowcount
     });
     clonecopy.find("select[name^='det_quantity']").attr({
      "name": "det_quantity_"+rowcount,
      "id": "det_quantity_"+rowcount
     });
     clonecopy.find("select[name^='det_price']").attr({
      "name": "det_price"+rowcount,
      "id": "det_price"+rowcount
     });
     clonecopy.insertAfter(destination);
     $('#det_arrayitems').val(rowcount);
    }

$("#add").click(function() {
        parent_row = $('#details tbody>tr:last');
        addrow(parent_row);
    });    

$('input.sku').autocomplete({
     source: "../json/products.php",
     minLength: 2,
     select: function(event, ui) {
      $(this).parent().siblings().children('input.name').val(ui.item.name);
     }
    })

Ich habe auch versucht, diese (und ein paar andere Ideen), aber kein Glück

$("#add").live("click", function() {
 parent_row = $('#details tbody>tr:last');
 addrow(parent_row);
 $('input.sku').autocomplete({
  source: "../json/products.php",
  minLength: 2,
  select: function(event, ui) {
   $('input.sku').parent().siblings().children('input.name').val(ui.item.name);
  }
 })
});

Bitte, können Sie mir helfen? Dank ...

Answer 1

die Lösung gefunden, hatte ich die Autovervollständigung in der addrow Funktion setzen und das Wort „wahr“ aus dem .clone (true) nach (und Dank) zu diesem entfernen: JQuery: Wie Klon zur automatischen Vervollständigung Felder

function addrow(destination) {
 rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
 clonecopy = destination.clone();
 clonecopy.attr("class","iterable");
 // update numerical suffixes
 clonecopy.attr("id","row_"+rowcount);
 clonecopy.find('.sku, .name').val('');
 clonecopy.find("input[name^='det_sku']").attr({
  "name": "det_sku_"+rowcount,
  "id": "det_sku_"+rowcount
 }).autocomplete({       
  source: "../json/products.php",       
  minLength: 2,
  select: function(event, ui) {
   $(this).parent().siblings().children('input.name').val(ui.item.name);       
  }
 });
 clonecopy.find("input[name^='det_name']").attr({
  "name": "det_name_"+rowcount,
  "id": "det_name_"+rowcount
 });

 clonecopy.find("select[name^='det_quantity']").attr({
  "name": "det_quantity_"+rowcount,
  "id": "det_quantity_"+rowcount
 });
 clonecopy.find("select[name^='det_price']").attr({
  "name": "det_price"+rowcount,
  "id": "det_price"+rowcount
 });
 clonecopy.insertAfter(destination);
 $('#det_arrayitems').val(rowcount);

}

Answer 2

Ich mache etwas ähnliches, wo ich ein div habe, dass alle Zeilen enthält, und EACT Eingabefeld in einer Reihe hat einen rel-Tag mit dem Basisteil davon den Namen und die ID und dann auf dem Klick eine Reihe nenne ich das hinzufügen folgendes ein:

 $("#addChain").click(function() {  
         var index = $("#chainHolder").children().length + 1;  
        $("#chainHolder").children(":first").clone().each(function() {  
       $(this).find(":input").each(function() {  
                $(this).attr("id", $(this).attr("rel")+"["+index+"]");  
                $(this).attr("name", $(this).attr("rel")+"["+index+"]");  
            });  
             $(this).children(":first").val(index);  
        }).appendTo("#chainHolder");  
    });  

Answer 3

Schaltfläche Erstellen mit Klassennamen Hinz, dann auf dem Klick Ruftaste die folgende Methode. Bitte bilden Sie Ihre Tabellenzeile wie folgt unten und schließlich append, dass html auf den Tisch gebildet wird.

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
     html = '<tr>';
     html += '<td><input class="case" type="checkbox"/></td>';
     html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '</tr>';
     $('table').append(html);
     i++;
 });

Skript Nach dem Lösch Teil tun ... Für löschen erstellen Schaltfläche mit Klassennamen löschen.

//deletes the selected table rows
$(".delete").on('click', function() {
   $('.case:checkbox:checked').parents("tr").remove();
   $('#check_all').prop("checked", false); 
});

hatte ich einfaches Tutorial gemacht für Musterrechnung System mit allen Funktionen die Sie erwähnten rechts von

1. mehrere Tabellenzeile hinzufügen und löschen
2. mehrere zur automatischen Vervollständigung und viel

Rechnungs System mit jQuery Autocomplete