1
実際に画像のサムネイルに商品名を追加したいと思います。オプションタグに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()する必要があるかもしれません.Ajaxの返信では常に空白のようです。 try:var data = $ .parseJSON(JSON.stringify(response.trim())); – gavgrif
いいえ動作しません。 – Mohan