ダイナミックテキストボックスにオートコンプリートを追加する

Question

最初に1つのテキストボックスを含む行が含まれており、テキストボックスに自動完成機能が追加されています。それから私はjavascriptを使っていくつかのテキストボックスを追加しました。新しく作成されたテキストボックスにオートコンプリート機能を追加します。新しくcretedテキストボックスにオートコンプリートを追加するために私を助けてください

自動補完のための私のコードは 関数のAddRow（TABLEID）{

 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> 

のように新しいテキストボックスを生成するための

<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); 
    }; 
}); 

コードです

私のフォームは コード id です。 MRP 価格

 <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); 
    }; 
}); 

に名前を付け、その後、あなたが作品のための機能で何かを変更する必要があり、その

$(element1).CreateAutocomplete(); 

のようなのAddRow機能でautocompeteを作成:)

Answer 2

this.it worksを使用してください

$('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

この全体のコードはdynamicaly用では、オートコンプリート機能

<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;   
    }); 


}); 

でテキストボックスを作成し、これはエラーが何であるかを見る

<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>