Search code examples
jquerycodeigniterautocompletecodeigniter-3jquery-ui-autocomplete

Codeigniter Autocomplete image url setting Select: functuion (event, ui)


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


Solution

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