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,.

1 respuesta

Respuesta
1

Es un tema propio de JavaScript y algo de CSS. Aquí tienes un ejemplo que te puede ayudar.

Suerte!

Hola Mauro, amm muchas gracias, pero ahh lamentablemente no le entiendo muy bien con las llamadas y todo eso, no soy así gran experto en ajax =(

No sé bien cómo ayudarte 🙁. Te puedo dejar estos artículos con ejemplos por si te sirven https://academy.leewayweb.com/tag/ajax/ 

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas