How to display multiple field from database inside autocomplete input

Question

Hello here is my problem.

I have an autocomplete input that retrive data from my database that shows me an image and a text. What I want to do is add another text next to it but from another field. But when I try it doesn't find my image anymore.

Here is my code :

PHP FILE

  <input type="text" name="text" id="text" autocomplete="off"><br />

  <input type="submit" name="submit" class="button"><br /><br />

</form>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript">

  $(function(){

    $('#ref').autocomplete({

      source: 'autocomplete.php'

    }).data("ui-autocomplete")._renderItem = function (ul, item) {
      return $("<li><div><img src='img/" + item.value + "' /><span>" + item.value + "</span></div></li>").appendTo(ul);
    };

  });
</script>

autocomplete.php

  require('db.php');

  $term = $_GET['term'];


  $q = $db -> prepare('SELECT data1,data2 FROM table WHERE data1 LIKE :term');

  $q -> execute(array('term' => '%'.$term.'%'));


  $array = array();

  while ($data = $q -> fetch()) {

    array_push($array, $data['data1']. ":".$data['data2']);

  }


  echo json_encode($array);

?>

So to be clear this is how i'd like it to be shown in my input :

MYIMG DATA1 : DATA2

Sorry if I'm not being clear enough.

Thanks for your help.