for循环在自动完成内部不起作用

Question

<script type="text/javascript">
jQuery(document).ready(function($){
    for($i=1; $i<=15; $i++) {
        $("#sr_no"+$i).autocomplete({
            source: "autocomplete/taka.php",
            minLength: 1,
            select: function(event, ui) {
                $("#sr_no"+$i).val(ui.item.sr_no);
                $("#design_name"+$i).val(ui.item.design_name);
                $("#color"+$i).val(ui.item.color);
                $("#meter"+$i).val(ui.item.meter);
                $("#weight"+$i).val(ui.item.weight);    
            }
        });
     }
});
</script>

<?php
print("<table id='expense_table' cellspacing='0' cellpadding='0' border='1'>");
    print("<thead>");
        print("<tr>");
            print("<th>No</th>");
            print("<th>Sr. No</th>");
            print("<th>Design Name</th>");
            print("<th>Color</th>");
            print("<th>Meter</th>");
            print("<th>Weight</th>");
            print("<td>&nbsp;</td>");
        print("</tr>");
    print("</thead>");
    print("<tbody>");
    for ($i=1; $i<=15; $i++) {
        print("<tr>");
            print("<td>$i</td>");
            print("<td><input type='text' name='sr_no[$i]' maxlength='21' id='sr_no$i' /></td>");
            print("<td><input type='text' name='design_name[$i]' maxlength='21' id='design_name$i'  /></td>");
            print("<td><input type='text' name='color[$i]' maxlength='21' id='color$i' /></td>");
            print("<td><input type='text' name='meter[$i]' class='meter' maxlength='21' id='meter$i' /></td>");
            print("<td><input type='text' name='weight[$i]' maxlength='21' class='weight' id='weight$i' size='10' /></td>");                            
        print("</tr>");
    }
?>

for loop is not working. I'm getting the data. onclick on detail only sr_no is coming, no other detail is coming on table.

for loop is not working inside autocomplete. Following line is not working:

$("#sr_no"+$i).val(ui.item.sr_no); 
$("#design_name"+$i).val(ui.item.design_name);
$("#color"+$i).val(ui.item.color);
$("#meter"+$i).val(ui.item.meter);
$("#weight"+$i).val(ui.item.weight);

eg:
table look like this 
sr_no design_name color meter weight
25        test     red   100    15
26        test2    pink  120    17

my code show detail but on click only sr_no display in input field

25       null      null  null null   (null mean nothing showing)

Answer 1

You should return JSON object data from php file to the source, for instance php file must return something like this:

<?php
$values = array(
    "Sr. No" => "val-1",
    "Design Name" => "val-2",
    "Color" => "val-3",
    "Meter" => "val-4",
    "Weight" => "val-5"
);
echo json_encode($values);

?>

Then you'll have to make ajax call to php file and render the table from javascript file like this:

            var $table = $('<table>');
        $table.append('<caption></caption>')
        // thead
            .append('<thead>').children('thead')
            .append('<tr />').children('tr').append('<th>No</th><th>Sr. No</th><th>Design Name</th><th>Color</th><th>Meter</th><th>Weight</th>');

        //tbody
        var $tbody = $table.append('<tbody />').children('tbody');
            // add row
            $tbody.append('<tr />').children('tr:last')
                .append("<td>values[i]</td>")
                .append("<td>val</td>")
                .append("<td>val</td>")
                .append("<td>val</td>");
        }
        // add table to dom
        $table.appendTo('#myTable');
    <div id="myTable"></div>

Take a look at this for reference link