當自動完成輸入改變時更改動態加載的圖像

Question

我有一個包含動態創建行的表格 - 每個表格都是一組輸入，其中一個是用戶可以搜索項目的自動填充輸入字段，給出一個選擇列表，當他們選擇一個時，其ITEM的詳細信息將填充到所有其餘字段中，並且從數據庫調用與其選擇對應的圖像。

這裏是我的數據庫調用查詢：

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

在我的JQuery所有我需要做的就是地方是：

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

所以它會把圖像到DIV ID：prodImage。

我已經試過if語句：

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

而且......

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

而且一大堆的變化和replaceWith()語句，但無濟於事。

您可以在這裏檢查出現場的接口：

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

用戶名：stackUser

密碼：demo

會發生什麼，充其量，是圖像成一團一個下其他...

任何幫助表示讚賞。我也嘗試過以下帖子，但它沒有工作:( Change image src with jQuery autocomplete

在響應RST的一段代碼，這裏是我如何試圖實現它，以便它只改變圖像中確切的TR其中autocomlete ifield改變：

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

這是我如何解決這個問題：

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

在HTML設置圖像標籤已經

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

jQuery的

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

此代碼應該在一個函數，是這樣的：

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

所以，當做出選擇它會調整。

Answer 2

通過使用此代碼解決，調整了很多東西后，再次感謝RST！

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