更改自动填充输入时更改动态加载的图像

Question

I have a table with dynamically created rows ('s) - in each is a set of inputs, one of which is an autocomplete input field where the user can search for an item and is given a list of choices, when they select one, the details of their ITEM are populated in all the remaining fields and an image that corresponds to their choice is called from the Database.

Here's my DB call Query:

$return_arr = array();
$param = $_GET["term"];
$fetch = mysql_query("SELECT * FROM crd_jshopping_products WHERE `name_en-GB` REGEXP '^$param' LIMIT 5");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['product_name']  = $row['name_en-GB'];
    $row_array['category']  = $row ['meta_keyword_en-GB'];
    $row_array['jshop_code_prod'] = $row['product_ean'];
    $row_array['_ext_price_html']  = number_format($row['product_price'],2);

    if (!empty($row['product_thumb_image']) AND isset($row['product_thumb_image'])){
        $row_array['image'] = $row['product_thumb_image'];      
    }else {
        $row_array['image'] = 'noimage.gif';    
    }
    array_push( $return_arr, $row_array );
}   
mysql_close($conn);
echo json_encode($return_arr);

In my JQuery all I have to do is place this:

$('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');

So it will put the Image into the div ID : prodImage.

I have tried IF Statements:

if ($('#prodImage').length)
{
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');
}
else {
    $('#prodImage').remove();                                       
}

And ...

if (!$('#imgLoads').length)
{
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');
}
else if($('#imgLoads').length){
    $('#prodImage').remove();                                       
}

And a whole bunch of variations and replaceWith() statements, but to no avail.

You can check out the live interface here :

http://cardoso.co.za/index.php/login-shop

Username: stackUser

Password: demo

What happens, at best, is the images bunch up one under the other ...

Any help is appreciated. I have also tried the following post, but it didn't work :( Change image src with jQuery autocomplete

In Response to RST's piece of code, here is how I have tried to implement it so that it only changes the image in the exact TR where the autocomlete ifield is changed:

     $(this).closest('#product_name').blur(function(){
              $('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);
          });

This is how I solved the issue:

    $(this).closest('tr').find('#product_name').blur(function(){
    $(this).closest('tr').find('.imgLoads').attr('src','/components/com_jshopping‌​/files/img_products/' + ui.item.image);
    $(this).closest('tr').find ('.imgLoads').attr('style','border-r‌​adius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;border:solid 1px #CF3;');
    });

Answer 1

In your HTML set the image tag already

<div id="prodImage">
   <img class="imgLoads" src="">
</div>

jQuery

$('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);

This code should go in a function, something like:

$('#some-element-id').change(function(){
   $('#prodImage img.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);
)};

So it will adjust when selections are made.