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>';
}
?> 
