Mostrar img en un autocomplete input
He estado buscando por todo internet y no logro hacer lo siguiente, espero puedan ayudarme.
Tengo este form al escribir un nombre me autocompleta.
Quisiera que a la izquierda pusiera la imagen del usuario que tengo guardada en una carpeta ejemplo 1.jpg, el código de mi input a buscar es.
<input autocomplete="off" class="typeahead form-control" placeholder="Escribe el nombre del contacto">
Mi JS tengo este código.
$('input.typeahead').typeahead({ source: function (query, process) { return $.get('../assets/php/search_contact.php', { query: query }, function (data) { data = $.parseJSON(data); return process(data); }); }, showHintOnFocus:'all' });
Mi PHP tengo este codigo.
$sql = "SELECT * FROM usuarios_perfil WHERE nombre LIKE '%".$_GET['query']."%' LIMIT 2"; $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn)); $json = array(); while( $rows = mysqli_fetch_assoc($resultset) ) { $img = "<img src='../../images/fotos/'".$rows["id_img"].".jpg'>"; $json[] = $rows["nombre"].' '.$rows["apellido"]; } echo json_encode($json); mysqli_free_result($resultset); mysqli_close($conn);
cuando guarda el array $json[] = $rows["nombre"].' '.$rows["apellido"]; me imprime normal asi como muestro en la imagen he intentado poner $json[] = $img.' '.$rows["nombre"].' '.$rows["apellido"]; pero no me muestra la imagen aqui lo que quiero es que muestre la imagen del usuario y si se podra con un widht y height personalizado, nose si me doy a explicar espero puedan ayudarme ya que estoy atorado y no encuentro algun tema por internet,.