rellenar input con base de datos

mrn_sonick · #1 (**permalink**) 18/04/2013, 05:47

hola tengo un problema tengo una base de datos q tiene unos paises la idea del input es q mientras escribe abajo aparesca unalista con las opciones a medida que escribe esta lista esta relacionada a la base de datos y para el final q si selecciona un elemento de la lista q se genera lo carge directo en el input lo ultimo es lo q no hace encontre unos codigos pero a un no puedo hacer la ultima parte les dejo los codigos aver si alguien me pede ayudar
HTML
<style>
.suggest-element{
margin-left:5px;
margin-top:5px;
width:350px;
cursor:pointer;
}
#suggestions {
width:350px;
height:150px;
overflow: auto;
}
</style>
</head>

<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: "ajax3.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).attr("id"));
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);
});
}
});
});
});
</script>

<body>

<form>
<input type="text" size="50" id="service" name="service" />
<div id="suggestions"></div>
</form>
</body>

AJAX
<?php
header( 'Content-type: text/html; charset=iso-8859-1' );

include("funcion/conx.php");
conection();

$search = $_POST['service'];
$sql_services="select * from paises where NOM_PAISES LIKE '".$search."%'";
$query_services = mysql_query($sql_services);
while ($row_services = mysql_fetch_array($query_services)) {
echo '<div class="suggest-element"><a data="'.$row_services['NOM_PAISES'].'" id="service'.$row_services['ID_PAISES'].'">'.utf8_encode($row_services['NOM_PAISES']).'</a></div>';
}
?>

emprear · #2 (**permalink**) 18/04/2013, 07:17

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