将自动完成添加到动态文本框

Question

最初包含一行带有单个文本框，我向文本框添加了自动完成功能，它工作正常。然后我使用 javascript 添加了更多文本框，现在我想将自动完成功能添加到新创建的文本框。请帮我将自动完成添加到新创建的文本框

我的自动完成代码是

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

用于生成新文本框的代码，例如 函数 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> 

我的表格是 代码 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 ); 
    };
});

然后像这样在 addRow 函数中创建自动竞争

$(element1).CreateAutocomplete();

你必须为作品改变一些功能:)

Answer 2

使用这个。它可以工作

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

整个代码用于动态创建的具有自动完成功能的文本框

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