Saludos, Estoy intentando hacer un autocompletar en jquery con php. El ejemplo lo he cogido de una pagina web y me ha venido muy bien. Me funciona todo genial excepto que el primer caracter que pongo en el input no me lo coge hasta que pongo el siguiente.
Pongamos que en el input pongo 25, haciendo referencia al dni. en el alert al introducir el 2 me muestra en blanco, y cuando pongo el 5 me muestra el 2, y asi sucesivamente. La idea es que cuando se pulse la primera cifra ya lo busque en la base de datos y no espere a que se introduzca la siguiente:
Código:
$(document).ready(function() {
//Al escribr dentro del input con id="service"
$('#service').keypress(function(){
//Obtenemos el value del input
var service = $(this).val();
alert(service);
var dataString = 'service='+service;
//Le pasamos el valor del input al ajax
$.ajax({
type: "POST",
url: "autocomplete.php",
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$('#suggestions').fadeIn(1000).html(data);
//Al hacer click en algua de las sugerencias
$('.suggest-element').on('click', function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr('id');
//Editamos el valor del input con data de la sugerencia pulsada
$('#service').val($('#'+id).attr('data'));
//Hacemos desaparecer el resto de sugerencias
$('#suggestions').fadeOut(1000);
});
}
});
});
});
Código PHP:
<?php
header( 'Content-type: text/html; charset=iso-8859-1' );
include('con_bd.php');
$search = $_POST['service'];
$query_services = "SELECT nombre, apellidos FROM clientes WHERE dni like '" . $search . "%'";
echo $query_services;
$result = $con->query($query_services);
while ( $row = $result->fetch_assoc() ) {
echo '<div class="suggest-element"><a data="'.$row['apellidos'].'" id="'.$row['nombre'].'">'.utf8_encode($row['apellidos']).'</a></div>';
}
?>