JQuery - Consulta sobre Autocompletado

   
Vista:

Consulta sobre Autocompletado

Publicado por norberto (2 intervenciones) el 03/07/2016 18:40:10
Buen día:


Tengo el siguiente código para sugerir la localidad:

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<head>
<style>
.suggest-element{margin-left:5px;margin-top:5px;width:350px;cursor:pointer;}
#suggestions {width:550px;height:250px;overflow: auto;}
</style>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript" src="jQuery-2.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Al escribr dentro del input con id="busco_localidad"
    $('#busco_localidad').keypress(function(){
        //Obtenemos el value del input
        var busco_localidad = $(this).val();
        var dataString = 'busco_localidad='+busco_localidad;
        //Le pasamos el valor del input al ajax
        $.ajax({
            type: "POST",
            url: "autocomplete_localidades.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
                    var id = $(this).attr('id');
                    //Editamos el valor del input con data de la sugerencia pulsada
                    $('#busco_localidad').val($('#'+id).attr('data'));
                    //Hacemos desaparecer el resto de sugerencias
                    $('#suggestions').fadeOut(1000);
                });
            }
        });
    });
});
</script>
<body>
<form>
   Localidad: <input type="text" size="50" id="busco_localidad" name="busco_localidad" />
   <div id="suggestions"></div>
</form>
</body>
</head>


autocomplete_localidades.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//header( 'Content-type: text/html; charset=iso-8859-1' );
 
$conexion = mysql_connect('localhost', 'root', '') or die('No se pudo conectar: ' . mysql_error());
mysql_select_db('famularo') or die('No se pudo seleccionar la base de datos');
 
$search = $_POST['busco_localidad'];
  $query = mysql_query("SELECT loc.idlocalidad id, concat(loc.nombre,', ',pro.nombre) title FROM localidades loc left join provincias pro on loc.idprovincia=pro.idprovincia WHERE loc.nombre like '" . $search . "%' ORDER BY loc.nombre DESC", $conexion);
 
while ($row = mysql_fetch_array($query))
{
    echo '<div class="suggest-element"><a data="'.$row['title'].'" id="busco_localidad'.$row['id'].'">'.utf8_encode($row['title']).'</a></div>';
}
?>

Soy nuevo en esto, necesitaría saber como hacer lo siguiente.
Al presentar la pantalla mandarle el idlocalidad actual y que muestre la localidad actual y al modificarla tomar la seleccionada para grabar la tabla.

Desde ya muchísimas Gracias a alguien que pueda ayudarme!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Consulta sobre Autocompletado

Publicado por xve (557 intervenciones) el 03/07/2016 20:00:21
Hola Norberto, no entiendo muy bien tu duda... nos puedes comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Consulta sobre Autocompletado

Publicado por norberto (2 intervenciones) el 03/07/2016 20:07:00
Hasta ahora puedo mostrar un input, y buscar la localidad pero al seleccionarla no hace nada cuando necesitaria tomar el ID de la misma.
Gracias por tu tiempo!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Consulta sobre Autocompletado

Publicado por elporfirio elporfirio@gmail.com (9 intervenciones) el 06/07/2016 14:44:41
Hola amigo, no lo hace por que ".suggest-element", es un elemento dinámico (es decir no existe hasta que obtienes resultados).

quita las lineas 24 a 31 de tu ejemplo :

1
2
3
4
5
6
7
8
$('.suggest-element').live('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
                    $('#busco_localidad').val($('#'+id).attr('data'));
                    //Hacemos desaparecer el resto de sugerencias
                    $('#suggestions').fadeOut(1000);
                });

Y despues de esto:

1
$(document).ready(function() {

Agrega estas lineas
1
2
3
4
$('#suggestions').on('click', '.suggest-element', function(){
                    $('#busco_localidad').val($(this).attr('data'));
                    $('#suggestions').fadeOut(1000);
                });

No te doy mas explicación, pues se ve que el código lo copiaste de alguna fuente que está muy "desactualizada", así que copiando y pegando el código te deberia funcionar


Saludos desde México.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar