0

これには、最初に単一のテキストボックスを持つ行が含まれており、テキストボックスにオートコンプリート機能を追加しました。次に、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>
4

3 に答える 3

0

これを使用してください。

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


        });
        });
于 2014-03-29T09:33:00.223 に答える
0 
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();

作品のために関数で何かを変更する必要があります:)

于 2012-04-13T09:04:30.360 に答える