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

用于生成新文本框的代码 function 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函数中创建autocompete，就像那样

$(element1).CreateAutocomplete();

你必须为作品改变一些功能：）

Answer 2

使用this.it有效

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

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

3 个答案: