Show image after select: function(event, ui)

After selecting a user from autocomplete dropdown, the users name appears in the input field, now I want to display the users image.

The default image does change, after selection, but it wont load the user image?

I feel I am missing something from

var img = ui.item.label;
$("#pic").attr("src",img);

I saw one question similar to this on looking it up (show-image-in-jquery-ui-autocomplete), but this question does not use json.

Please help?

INDEX.PHP

 <body>
    <br />
    <br />
    <div class="container">
      <br />
      <div class="row">
        <div class="col-md-3">
          <img id="pic" src="images/default-image.png">
        </div>
        <div class="col-md-6">
          <input type="text" id="search_data" placeholder="Enter Student name..." autocomplete="off" class="form-control input-lg" />
        </div>
        <div class="col-md-3">
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){
      
    $('#search_data').autocomplete({ //gets data from fetch 
      source: "fetch.php",
      minLength: 1,
      select: function(event, ui)
      {
        $('#search_data').val(ui.item.value);
        
        //$("#pic").val(ui.item.img);

        var img = ui.item.label;
        $("#pic").attr("src",img);
      },

    })
    .data('ui-autocomplete')._renderItem = function(ul, item){ //renders the item in a ul 
      return $("<li class='ui-autocomplete-row'></li>") //formats the row in css
        .data("item.autocomplete", item) //auto complete item
        .append(item.label) 
        .appendTo(ul);
    };
  });
</script>

FETCH.php

if(isset($_GET["term"]))
{
    $connect = new PDO("mysql:host=localhost; dbname=tests_ajax", "root", "");

    $query = "
    SELECT * FROM tbl_student 
    WHERE student_name LIKE '%".$_GET["term"]."%' 
    ORDER BY student_name ASC
    ";

    $statement = $connect->prepare($query);

    $statement->execute();

    $result = $statement->fetchAll();

    $total_row = $statement->rowCount();

    $output = array();
    if($total_row > 0)
    {
        foreach($result as $row)
        {
            $temp_array = array();
            $temp_array['value'] = $row['student_name'];
            $temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" />&nbsp;&nbsp;&nbsp;'.$row['student_name'].'';
            $temp_array['img'] = '<img src="images/'.$row['image'].'" width="70" />';
            $output[] = $temp_array;
        }
    }
    else
    {
        $output['value'] = '';
        $output['label'] = 'No Record Found';
        $output['img'] = 'No Record Found';
    }

    echo json_encode($output);
}

?>

Answer

You’re returning an entire <img> element (and additional text):

$temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" />&nbsp;&nbsp;&nbsp;'.$row['student_name'].'';

So when you do this:

var img = ui.item.label;
$("#pic").attr("src",img);

What you’re attempting to end up with is this:

<img id="pic" src="<img src="images/someFile.jpg" width="70" />&nbsp;&nbsp;&nbsp;Some Name">

Which of course is just a bunch of syntax errors.

If you just want to set the src of an existing <img> then only return that src value:

$temp_array['img'] = 'images/'.$row['image'];

And set the src to that value:

$("#pic").prop("src", ui.item.img);

Advertisement

Answer