fijate
Código:
$('.suggest-element').live('click', function(){
//Obtenemos la id unica de la sugerencia pulsada
alert($(this).attr("id"));
var id = $(this).attr('id');
estás haciendo el click sobre la clase, pero lo que necesitás es el atributo id, el cual definiste dentro de un <a></a>
te hago una modificación, que es más simple me parece
Código:
<script type="text/javascript">
$(document).ready(function() {
//Al escribr dentro del input con id="service"
$('#service').keyup(function(){
//Obtenemos el value del input
var service = $(this).val();
var dataString = 'service='+service;
//Le pasamos el valor del input al ajax
$.ajax({
type: "POST",
url: "sugerencias.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').live('click', function(){
//Obtenemos la id unica de la sugerencia pulsada
//alert($(this).html());
var id = $(this).html();
//Editamos el valor del input con data de la sugerencia pulsada
$('#service').val(id);
//Hacemos desaparecer el resto de sugerencias
$('#suggestions').fadeOut(1000);
});
}
});
});
});
</script>
y te pongo un php con la data ya generada solo para probar
sugerencias.php
Código:
<?php
// recorres la base de tatos para que te genere la lista de divs correspondientes a la búsqueda
?>
<div class="suggest-element">a</div>
<div class="suggest-element">b</div>
<div class="suggest-element">c</div>
<div class="suggest-element">d</div>
<div class="suggest-element">e</div>
Saludos