I stuck displaying image with autocomplete select function. When I want to set img src, hover address show different path as current page URL. Here is codes
View Code
<span class="pimg">
<a href="#">
<picture>
<input class="spec_blk" readonly name="image" value=""> </div>
<img id="resimler">
</picture>
</a>
</span>
my jquery code
$(document).ready(function(){
$('#title').autocomplete({
source: "<?php echo site_url('home/get_autocomplete');?>",
select: function (event, ui) {
$('[name="title"]').val(ui.item.label);
$('[name="image"]').val(ui.item.image);
$( "#resimler" ).attr( "src", "localhost/uploads/+ ui.item.image );
}
});
});
Last Controller
function get_autocomplete(){
$this->load->model('apsisx');
if (isset($_GET['term'])) {
$result = $this->apsisx->search_comp($_GET['term']);
if (count($result) > 0) {
foreach ($result as $row)
$arr_result[] = array(
'label' => $row->p_name,
'image' => $row->image,
);
echo json_encode($arr_result);
}
}
}
The problem can be seen in https://prnt.sc/u8wa0n
Image path localhost/uploads/20200826160809_723647.jpg
Result path localhost/current_page_url/localhost/uploads/20200826160809_723647.jpg
close quotation mark after "localhost/uploads/
Change
$( "#resimler" ).attr( "src", "localhost/uploads/+ ui.item.image );
To this
$( "#resimler" ).attr( "src", "localhost/uploads/"+ ui.item.image );