具有动态行的jQuery自动完成

Question

I have the following jQuery code:

$(document).ready(function(){
var ac_config = {
    source: "autocomplete-delta.php",
    select: function(event, ui){
        $("#del_item").val(ui.item.SKU);
        if ((ui.item.CASE_PRICE) != "N/A"){
            $("#del_price").val(ui.item.CASE_PRICE);
        } else {
            $("#del_price").val(ui.item.UNIT_PRICE);
        }
    },
    minLength:1
};
$("#del_item").autocomplete(ac_config);
});

Which works fine for one line item, basically the line item takes an item name, which is the field you type in for autocomplete and then after selecting it fills the price field with either the unit price or case price from my DB. Now I want to have 18 of these rows which I set up through php to be del_item1, del_item2 etc. and when I tried the following code, the autocomplete works and it fills in the item fine, but the price field does not fill in, any ideas...?

$(document).ready(function(){
for (var i = 1; i < 19; i++) {  
    var ac_config = {
    source: "autocomplete-delta.php",
    select: function(event, ui){
        $("#del_item" + i).val(ui.item.SKU);
        if ((ui.item.CASE_PRICE) != "N/A"){
            $("#del_price" + i).val(ui.item.CASE_PRICE);
        } else {
            $("#del_price" + i).val(ui.item.UNIT_PRICE);
        }
    },
    minLength:1
};
$("#del_item" + i).autocomplete(ac_config);
}); 

Answer 1

Here is the php file that the JS references:

<?php
require_once "/home/default/support/default.php";
$dbh = showDB ();
$cities = array();
$sth = $dbh->prepare("SELECT * FROM purchase_items");
$sth->execute();

 while($row = $sth->fetch(PDO::FETCH_ASSOC)) {
$cities[]=$row;
 }

$term = trim(strip_tags($_GET['term']));

$matches = array();
foreach($cities as $city){
if((stripos($city['SKU'], $term) !== false) || (stripos($city['FAMILY'], $term) !== false) || (stripos($city['DESCRIPTION'], $term) !== false)){
    // Add the necessary "value" and "label" fields and append to result set
    $city['value1'] = $city['SKU'];
    $city['value2'] = $city['FAMILY'];
    $city['value3'] = $city['DESCRIPTION'];
    $city['label'] = "{$city['FAMILY']} - {$city['DESCRIPTION']} ({$city['SKU']})";
    $matches[] = $city;
}
}
$matches = array_slice($matches, 0, 100);
print json_encode($matches);

And here is the html side as requested above these are the 16 line items I'm working with, inside of a for loop the counter in the loop is $d:

if($d&1) { ?>
<div id="trow">
<? } else { ?>
<div id="trow" class="none">
    <? } ?>
        <div id="thirds" style="text-indent:5px;">
    <input type="text" name="del_item<? echo("$d");?>" id="del_item<? echo("$d");?>" class="salesinput"
    placeholder="Start typing item SKU, family, description..." style="text-align:left; width:95%;" />
    </div>
    <div id="dollar"><span class="tdblackbigger">$ </span></div>
    <div id="lfamt" style="width:15%;"><input type="text" name="del_price<? echo("$d");?>" id="del_price<? echo("$d");?>" class="salesinput" style="text-align:right; padding-right:5px;" /></div>
    <div id="lfsold" style="width:15%;"><input type="text" name="del_retail<? echo("$d");?>" id="del_retail<? echo("$d");?>" class="salesinput" /></div>
    <div id="dollar"><span class="tdblackbigger">$ </span></div>
    <div id="lfamt" style="width:15%;"><input type="text" name="del_line<? echo("$d");?>" id="del_line<? echo("$d");?>" class="salesinput" style="text-align:right; padding-right:5px;" /></div>
       </div>