Hinzufügen von Autocomplete zu dynamischen Textfeld

Question

, die zu Beginn eine Zeile mit einzelnen Textfeld enthält und ich Auto-Vervollständigen-Funktionalität in den Textkasten hinzugefügt funktioniert es gut. Dann habe ich einige weitere Textfelder hinzugefügt, indem ich JavaScript benutze, jetzt möchte ich die Autovervollständigungsfunktionalität der neu erstellten Textbox hinzufügen. mir bitte helfen, die zur automatischen Vervollständigung in die neu creted Textbox

für Auto-Vervollständigen

mein Code

zum Erzeugen neuer Textbox wie Funktion addRow (tableID)

<script> 
$(".productcode").autocomplete({ 
     minLength: 0, 
      source: BASEURL1 + "sales/searchCustomer1/", 
        //source:projects1, 
     focus: function(event, ui) { 
      $(".productcode").val(ui.item.label); 

         // var id= $(this).attr('id'); 
         //  $(id).val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
         //alert($(this).attr('id')); 
      $("#product-code1").val(ui.item.label); 
           $("#product-id1").val(ui.item.prod_id); 
      $("#product-name1").val(ui.item.prod_name); 
           $("#product-mrp1").val(ui.item.mrp); 
       $("#product-price1").val(ui.item.sales_rate); 


     } 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>Code:" + item.label + "<br>Name:" + 
           item.prod_name + ",MRP:"+ item.mrp+ ",Rate:" + item.sales_rate + ",STk:" +item.stk +"</a>") 
      .appendTo(ul); 
    }; 
}); 

Code hinzufügen {

 var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "text"; 
    element1.id = "product-code"+(rowCount + 1); 
    element1.name="product-code["+(rowCount + 1)+"]"; 
    element1.setAttribute('class','productcode'); 
     element1.setAttribute('style','width:100px; float:none'); 
     $("#product-code1").autocomplete({ }); 
     cell1.appendChild(element1); 
     </script> 

mein Formular ist Code ID Name mrp Preis

 <tr> 
    <td> <input type="text" id="product-code1" name="productcode[1]" class="productcode" style="width:100px;float:none"/></td> 
    <td> <input type="text" id="product-id1" name="product-id[1]" readonly="readonly" style="width:100px;float:none"/></td> 
<td><input type="text" id="product-name1" name="product-name[1]" readonly="readonly" style="width:100px;float:none"/></td> 
    <td> <input type="text" id="product-mrp1" name="product-mrp[1]" readonly="readonly" style="width:100px;float:none"/></td> 
<td><input type="text" id="product-price1" name="product-price[1]" readonly="readonly" style="width:100px;float:none"/></td> 

    <td width="10%" align="left" nowrap="nowrap"> 
    <input type="button" style="display:none" name="btndelete" id="btnadd" class="blueBoxpsd" onClick="deleteRow1('dataTable','0')" value="delete"></td> 
    <td> <input type="checkbox" name="chk[]" id="chk0" style="display:none"/></td> 
    </tr> 
    </table> 

Answer 1

jQuery.fn.CreateAutocomplete = function(){ 
    $(this).autocomplete({ 
     minLength: 0, 
      source: BASEURL1 + "sales/searchCustomer1/", 
        //source:projects1, 
     focus: function(event, ui) { 
      $(this).val(ui.item.label); 

         // var id= $(this).attr('id'); 
         //  $(id).val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
         //alert($(this).attr('id')); 
      $("#product-code1").val(ui.item.label); 
           $("#product-id1").val(ui.item.prod_id); 
      $("#product-name1").val(ui.item.prod_name); 
           $("#product-mrp1").val(ui.item.mrp); 
       $("#product-price1").val(ui.item.sales_rate); 


     } 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>Code:" + item.label + "<br>Name:" + 
           item.prod_name + ",MRP:"+ item.mrp+ ",Rate:" + item.sales_rate + ",STk:" +item.stk +"</a>") 
      .appendTo(ul); 
    }; 
}); 

und erstellen autocompete in addRow Funktion wie die

$(element1).CreateAutocomplete(); 

Sie haben für die Arbeiten etwas in Funktion ändern :)

Answer 2

Verwenden Sie this.it funktioniert

$('body').delegate(".class name", "focusin", function() { 
      $(this).autocomplete({ 
       source: '@Url.Action("your method where is ur list","controller name")', 

      minLength: 1, 

      select: function (evt, ui) { 

       alert("label"+ui.item.label); 
       alert("id" + ui.item.id); 


     }); 
     }); 

Answer 3

diese ganze Code ist für dynamicaly erstellt Textfelder mit der automatischen Vervollständigung Funktionalität

<script type="text/javascript"> 

$(document).ready(function() { 
    var i = 0; 



    $("#lnkAddProduct").on("click", function() { 


     var d = '<div class="addedProduct "><div class="control-group " style="margin-bottom:10px;"><input type="text" class="ProductName span2 pull-left" id="Product_Name_' + i + '" name="Product_Name" value="" placeholder="start typing to load products")"/><input type="hidden" class="ProductId" name="Product_Id" id="Product_Id_' + i + '" value="" /><a href="#" class="clsremove font-midium" style="margin-left:5px;margin-top:5px;" id="remove_' + i + '">remove</a></div></div>'; 
     $('#ProductList').append(d); 
     alert("newID:"+i); 

     $(".clsremove").unbind("click").click(function() { 
      $(this).closest(".addedProduct").remove(); 
     }); 


     $('body').delegate(".ProductName", "focusin", function() { 
      $(this).autocomplete({ 
       source: '@Url.Action("NewvendorList","Product")', 
       // source: '@Url.Action("your method where is ur list","controller name")', 
      minLength: 1, 

      select: function (evt, ui) { 

       alert("label"+ui.item.label); 
       alert("id" + ui.item.id); 

     }); 
     }); 

     i = i + 1;   
    }); 


}); 

und dies ist der Code für die Ansicht

<div class="span10" style="margin-left:0px;"> 
       <a href="#" id="lnkAddProduct" style="font-size:14px;text-decoration:none;margin-right:10px;margin-left:30px;">Add Product</a> 

      </div>