1
其實我想追加產品名稱與圖像縮略圖。我已經在數據列表標籤完成追加產品的名稱,但圖片src不追加請人幫我,如何使用帶datalist標籤的選項標籤添加圖像src?
下面是我的代碼,
<div id="search" class="input-group">
<input type="text" id="search_suggest" name="search" list="products" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control input-lg" />
<datalist id="products">
</datalist>
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div>
JS,
$(document).on('keyup','#search_suggest',function(){
var product_name = $(this).val();
var x = 'image/no_image.png';
$.ajax({
url: 'index.php?route=product/search/search_suggestion',
type: 'post',
data: {'search': product_name},
dataType: 'json',
success: function(response) {
// console.log(response);
var data = $.parseJSON(JSON.stringify(response));
// console.log(data);
$('#products').empty();
$.each(data, function(i, res){
$('#products').append('<option value="'+res['name']+'"><img src="'+x+'"/></option>');
// $('#products').append('<option><img src="'+x+'"/></option>');
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert('error'); ;
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
您可能需要trim()響應數據 - re似乎總是Ajax返回的空白問題。嘗試:var data = $ .parseJSON(JSON.stringify(response.trim())); – gavgrif
沒有它的不工作。 – Mohan