[SOLUCIONADO] Problemas con autocompletado

zerobathory · #1 (**permalink**) 31/05/2015, 13:45

Hola, buenas tardes, tengo un problema con el autocompletado en jquery y php, no se si va el tema en este foro o en el de php, pero lo pongo aqui porque el nucleo en si de que funcione es jquery, tengo un formulario en el que se va a dar de alta un cliente, tengo los input, Nombre y telefono, quiero que ingresando el numero de telefono, primero se haga un autocompletado para mostrar los telefonos que hay en la base de datos, y posteriormente al elegir el telefono, se llene en automatico el campo Nombre, y en un campo oculto, me guarde el id del cliente lo estoy intentando de la siguiente forma:

formulario.php

Código:

<html lang="en">

<head>
<!-- Jquery Autocompletado -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
$(document).ready(function(){
    $( "#telefono" ).autocomplete({
        source: "buscartelefono.php",
        minLength: 2
    });
 
    $("#telefono").focusout(function(){
        $.ajax({
            url:'buscarcliente.php',
            type:'POST',
            dataType:'json',
            data:{ telefono:$('#telefono').val()}
        }).done(function(respuesta){
            $("#nombre").val(respuesta.nombre);
            $("#nombre").val(respuesta.paterno);
            $("#nombre").val(respuesta.materno);
			$("#idcliente").val(respuesta.id);
        });
    });
});
</script>
</body>
<form >
<label>Nombre Cliente</label>
<input class="form-control" id="nombre" name="nombre" >
<input type="hidden" name="idcliente" id="idcliente">
<label>*Tel&eacute;fono</label>
<input  class="form-control" name="telefono"  id="telefono">
</form>
</html>

buscartelefono.php

Código PHP:

  $telefono = $_GET['term'];

 

include("config.php");

$prefijo= $_SESSION["prefijotabla"];

$consulta = "SELECT telefono,celular,idotro FROM ".$prefijo."_clientes WHERE telefono LIKE '%$telefono%', celular LIKE '%$telefono%', idotro LIKE '%$telefono%'";

$result = $con->query($consulta);

 

if($result->rowcont() > 0){

    foreach($result as $fila){

        $telefonos[] = $fila['telefono'];

        $telefonos[]. = $fila['celular'];

        $telefonos[]. = $fila['idotro'];

    }

echo json_encode($telefonos);

}

buscarcliente.php

Código PHP:

  $telefono = $_POST['telefono'];

include("config.php");

$prefijo= $_SESSION["prefijotabla"];

$consulta = "SELECT nombrec,apaterno,amaterno,id FROM ".$prefijo."_clientes WHERE telefono = '$telefono' OR celular='$telefono' OR idotro='$telefono'";

$result = $con->query($consulta);

 

$respuesta = new stdClass();

if($result->rowcont() > 0){

    $fila = $result->fetch(PDO::FETCH_ASSOC);

    $respuesta->nombre = $fila['nombrec'];

    $respuesta->paterno = $fila['apaterno'];

    $respuesta->materno = $fila['amaterno'];

    $respuesta->id = $fila['id'];

}

echo json_encode($respuesta);

Pero al poner el telefono en el campo telefono, no me muestra los telefonos en la base de datos y al poner algun telefono que si esta en la base, no me autocompleta el campo Nombre, no se si estoy haciendo algo mal, Nota, estoy usando bootstrap

zerobathory · #2 (**permalink**) 03/06/2015, 14:30

Por favor ayuda, sigo con el mismo problema desde hace ya un par de dias, he buscado en varias paginas de internet y no he encontrado nada de ayuda, modifique mi archivo buscartelefono.php, en vez de hacerlo con PDO, ahora lo esoty haciendo con mysqli y es de la siguiente forma:

Código PHP:

  telefono = $_GET['term'];
$conexion = new mysqli('localhost','user','pass','base',3306);
$prefijo= $_SESSION["prefijotabla"];
$consulta = "SELECT * FROM ".$prefijo."_clientes WHERE telefono LIKE '%$telefono%' OR celular LIKE '%$telefono%' OR idotro LIKE '%$telefono%'";
$result = $conexion->query($consulta);
if($result->num_rows > 0){ 
    while($fila = $result->fetch_array()){ 
        $telefonos[] = $fila['telefono'];
    $telefonos[] = $fila['celular'];
    $telefonos[] = $fila['idotro'];
    } 
    echo json_encode($telefonos); 
}

Cuando ingreso directo a mi archivo mediante http://dominio.com/buscartelefono.php?term=91 por ejemplo, me imprime sin ningun problema los numeros que tengo en la base de datos que tienen incluido ese par de numeros, pero al momento de hacerlo mediante mi input para el autocompletado, no pasa absolutamente nada, y si le doy en inspeccionar elemento con la herramienta de desarrrollo de Chrome, si hasta haciendo la busquedaporque me aparece una etiqueta span que va cambiando conforme ingreso los numeros, pero siempre pone el mensaje "No search results found"

Estoy un poco desesperado, por favor ayudenme :( que pasa?? EStuve investigando, pensando que a lo mejor jquery lo envia por otro medio en vez de $_GET o que en vez de term sea otra variable, pero en todos los sitios dicen que jquery envia los datos en automatico meidante el metodo GET com la variable term, incluso en el source cuando lamo la funcion, he colocado la direccion completa del archivo con todo y la url o de esta forma "/nuevo/admin/buscaralumno.php" y nada :(

Alexis88 · #3 (**permalink**) 03/06/2015, 22:28

El widget autocomplete posee el método select el cual se ejecuta cuando seleccionas una de las opciones que se despliegan cuando realizas la búsqueda.

Hace un año hice un ejemplo con eso. Puedes echarle un vistazo aquí y tratar de adaptarlo a lo que necesitas.

Saludos

zerobathory · #4 (**permalink**) 04/06/2015, 15:01

Cita:

Iniciado por Alexis88

El widget autocomplete posee el método [URL="https://api.jqueryui.com/autocomplete/#event-select"][inline]select[/inline][/URL] el cual se ejecuta cuando seleccionas una de las opciones que se despliegan cuando realizas la búsqueda.

Hace un año hice un ejemplo con eso. Puedes echarle un vistazo [URL="http://www.forosdelweb.com/f179/aporte-buscador-datos-similar-facebook-1098878/"]aquí[/URL] y tratar de adaptarlo a lo que necesitas.

Saludos

Gracias por ser la unica respuesta :S pero no es lo que necesito, es una buena idea lo que comentas, pero no puedo hacer una accion despues de elegir una de las opciones del autocompletado, si en primera no me muestra ninguna opcion de la base, pero gracias de todos modos

zerobathory · #5 (**permalink**) 04/06/2015, 15:26

En fin, despues de mucho buscar por la red, y darme unos buenos topes en el escritorio, pude solucionar mi problema, Estoy usando Bootstrap, quedo de la siguiente forma:

formulario.php

Código PHP:

  <head>

<script>

$(document).ready(function(){

    $( '#telefono' ).autocomplete({

       source: function (request, response) {

       $.ajax({

       url: "buscartelefono.php",

       type: 'GET',

       dataType: 'json',

       data: request, success: function (data) {

       response(data);

       if (data.length == 0) {

        $('#ulNoMatch').show();

       }

    },

    error: function () {

        response([]); } });

       }

 
 
    });

 
</script>

</head>

<body>

<form >

<label>Nombre Cliente</label>

<input class="form-control" id="nombre" name="nombre" >

<input type="hidden" name="idcliente" id="idcliente">

<label>*Tel&eacute;fono</label>

<input  class="form-control" name="telefono"  id="telefono">

<ul id="ulNoMatch" lass="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16; display: none; width: 150px;">

                                        <li lass="ui-menu-item" role="menuitem">No se encontraron resultados <a href="inicio.php?v=ncliente" class="ui-corner-all" tabindex="-1">dar de alta</a></li>

/ul>

</form>

</body>

buscartelefono.php

Código PHP:

  session_start(); 

$telefono = $_GET['term'];

$conexion = new mysqli('localhost','usuario','contraseña','base',3306);

$prefijo= $_SESSION["prefijotabla"];

$consulta = "SELECT * FROM ".$prefijo."_clientes WHERE telefono LIKE '%$telefono%' OR celular LIKE '%$telefono%' OR idotro LIKE '%$telefono%'";

$result = $conexion->query($consulta);

if($result->num_rows > 0){ 

    while($fila = $result->fetch_array()){ 

        $telefonos[] = $fila['telefono'];

    $telefonos[] = $fila['celular'];

    $telefonos[] = $fila['idotro'];

    } 

    echo json_encode($telefonos); 

}

Alexis88 · #6 (**permalink**) 04/06/2015, 15:41

Si no te mostraba los resultados desde el inicio es porque algo andaría mal ya sea en la petición de los datos o en donde procesabas la búsqueda. Ten en cuenta que al hacer esto:

Código PHP:

Ver original$telefonos[] = $fila['telefono']; 
$telefonos[] = $fila['celular']; 
$telefonos[] = $fila['idotro'];

Los datos no estarán asociados sino dispersos, por eso en el ejemplo que te mostré, los agrupo en arrays y cada uno va dentro de uno más grande que es el que finalmente devuelvo.

Por cierto, el widget autocomplete realiza una petición asíncrona (Ajax), de manera que no era necesario que uses otra. Siempre lee la documentación existente, dicho widget posee varios eventos, métodos y opciones que puedes usar para obtener el resultado de una manera más eficiente.

Saludos

zerobathory · #7 (**permalink**) 04/06/2015, 16:17

Cita:

Iniciado por Alexis88

Si no te mostraba los resultados desde el inicio es porque algo andaría mal ya sea en la petición de los datos o en donde procesabas la búsqueda. Ten en cuenta que al hacer esto:

Código PHP:

Ver original$telefonos[] = $fila['telefono']; 
$telefonos[] = $fila['celular']; 
$telefonos[] = $fila['idotro'];

Los datos no estarán asociados sino dispersos, por eso en el ejemplo que te mostré, los agrupos en arrays y cada uno va dentro de uno más grande que es el que finalmente devuelvo.

Por cierto, el widget autocomplete realiza una petición asíncrona (Ajax), de manera que no era necesario que uses otra. Siempre lee la documentación existente, dicho widget posee varios [URL="https://api.jqueryui.com/autocomplete/#quick-nav"]eventos, métodos y opciones[/URL] que puedes usar para obtener el resultado de una manera más eficiente.

Saludos

De hecho con eso no tuve problemas, ya que ya funciona el autocompletado, si me muestra los resultados, si a caso el unic problema es que me esta mostrando los resultados vacios, es decir algo como esto:

47370220
91163255

12856004

90002344

Voy a ver como solucionarlo y con lo de ajax, si, se que no seria necesario hacerlo, pero es la unica forma en la que me funciono

Alexis88 · #8 (**permalink**) 04/06/2015, 16:24

No me entiendes. A lo que me refiero es a que esto:

Código PHP:

Ver original$telefonos[] = $fila['telefono']; 
$telefonos[] = $fila['celular']; 
$telefonos[] = $fila['idotro'];

No es lo mismo que esto:

Código PHP:

Ver original$telefonos[] = array('telefono' => $fila['telefono'], 'celular' => $fila['celular'], 'idotro' => $fila['idotro']);

En la primera forma, obtendrás un array con datos consecutivos, mientras que en la segunda, obtendrás un array que contiene arrays los cuales asocian los datos de cada persona (o lo que fuera), permitiendo así una mayor facilidad de búsqueda de los mismos. Por ejemplo, cuando buscas los datos de una persona e introduces su nombre o apellido, no solo obtienes dicho dato, ¿verdad? Pues lo mismo es para este caso. Si asocias los datos, cuando busques el 'celular', también obtendrás los otros dos datos que están asociados al mismo.

Solo es una sugerencia para que obtengas un mejor resultado.

Saludos

zerobathory · #9 (**permalink**) 04/06/2015, 16:34

Cita:

Iniciado por Alexis88

No me entiendes. A lo que me refiero es a que esto:

Código PHP:

Ver original$telefonos[] = $fila['telefono']; 
$telefonos[] = $fila['celular']; 
$telefonos[] = $fila['idotro'];

No es lo mismo que esto:

Código PHP:

Ver original$telefonos[] = array('telefono' => $fila['telefono'], 'celular' => $fila['celular'], 'idotro' => $fila['idotro']);

En la primera forma, obtendrás un array con datos consecutivos, mientras que en la segunda, obtendrás un array que contiene arrays los cuales asocian los datos de cada persona (o lo que fuera), permitiendo así una mayor facilidad de búsqueda de los mismos. Por ejemplo, cuando buscas los datos de una persona e introduces su nombre o apellido, no solo obtienes dicho dato, ¿verdad? Pues lo mismo es para este caso. Si asocias los datos, cuando busques el 'celular', también obtendrás los otros dos datos que están asociados al mismo.

Solo es una sugerencia para que obtengas un mejor resultado.

Saludos

Aaaaa ok, si ya te entendi mejor, perdona... De hecho cuando vi esa sugerencia intente hacerlo, y en el input, me aparece abajo la ventana en donde deberian estar los datos que va encontrando, pero no me muestra nada por asi decir... Digamos que tengo tres telefonos en la base que tienen 12, entonces al yo teclear 12, me aparece 3 resultados pero vacios, y si regreso a como estaba, me aparecen los numeros sin problema, sabras a que se debe?

Código PHP:

  $telefono = $_GET['term'];

$conexion = new mysqli('localhost','usuario','contraseña','base',3306);

$prefijo= $_SESSION["prefijotabla"];

$consulta = "SELECT * FROM ".$prefijo."_clientes WHERE telefono LIKE '%$telefono%' OR celular LIKE '%$telefono%' OR idotro LIKE '%$telefono%'";

$result = $conexion->query($consulta);

if($result->num_rows > 0){

    $telefonos= array();

    while($fila = $result->fetch_array()){ 

        $telefonos[] = array('telefono' => $fila['telefono'], 'celular' => $fila['celular'], 'idotro' => $fila['idotro']);

    } 

    echo json_encode($telefonos); 

}

Alexis88 · #10 (**permalink**) 04/06/2015, 16:41

Tienes que tomar en cuenta que, al hacerlo de esta forma, también cambiará la manera en la que recibes los datos. Ahora es un objeto JSON que contiene arrays. En el ejemplo que te pasé hago eso. Échale un ojo para que veas cómo lo hago y si no quieres usar el método $.ajax ni el select del autocomplete, mira los otros eventos y métodos que ofrece dicho widget. Quizá uno de ellos te puede servir.

Saludos

zerobathory · #11 (**permalink**) 04/06/2015, 17:05

Vas a decir que como molesto de seguro, ok, dentro de tu ejemplo que me mandaste, trate de adaptarlo a como es mi codigo, y lo trate de hacer de la siguiente forma

Código PHP:

  $(document).ready(function(){
    $( '#telefono' ).autocomplete({
       source: "buscartelefono.php",
       select: function (event, object){
        $(".dato").eq(0).html(object.item.telefono);
        $(".dato").eq(1).html(object.item.celular);
        $(".dato").eq(2).html(object.item.idotro);
        $("#response").slideDown();
    }
    }).data("ui-autocomplete")._renderItem = function (ul, item){
    return $("<li></li>")
        .append(" +item.telefono+ ")
    .append(" +item.celular+ ")
    .append(" +item.idotro+ ")
        .appendTo(ul);
};

al momento de escribir 12 en mi input, me aparecen dos rengloes asi:
+item.telefono++item.celular++item.idotro+
+item.telefono++item.celular++item.idotro+

Te explico, tanto la columna telefono, celular y idotro, tienen numeros telefonocos, entonces al empezar a teclear, se debe buscar un numero que coincida en cualquiera de esas tres columnas y empezar a mostrarlo, por eso repeti con los append para incluirlo.

Perdon por tanta molestia pero especificamente en jquery soy un noob

Saludos.

Alexis88 · #12 (**permalink**) 04/06/2015, 17:12

Eso sucede porque estás añadiendo cadenas, no los valores reales de las variables. Fíjate que las envuelves entre comillas, por eso no toma los valores que tienen.

zerobathory · #13 (**permalink**) 04/06/2015, 17:32

Si, me di cuenta despues de que estaba mal, si hago esto:

Código PHP:

Ver original$(document).ready(function(){
    $( '#telefono' ).autocomplete({
       source: "buscartelefono.php",
       select: function (event, object){
        $(".dato").eq(0).html(object.item.telefono);
        $(".dato").eq(1).html(object.item.celular);
        $(".dato").eq(2).html(object.item.idotro);
        $("#response").slideDown();
    }
    }).data("ui-autocomplete")._renderItem = function (ul, item){
    return $("<li></li>")
        .append(+item.telefono+)
    .append(+item.celular+)
    .append(+item.idotro+ )
        .appendTo(ul);
};

Con el array que tu me dijiste, me aparece en una sola linea dos o tres telefonos distintos, se me ocurrio hacer el array asi:

Código PHP:

Ver original$telefonos[] = array('telefonos' => $fila['telefono'], 'telefonos' => $fila['celular'], 'telefonos' => $fila['idotro']);

Y solo imprime el resultado de la ultima columna de idotro

si hago el array asi:

Código PHP:

Ver original$telefonos[] = array($fila['telefono'], $fila['celular'], $fila['idotro']);

No me imprime absolutamente nada, puff perdon enserio por tanta molestia

Alexis88 · #14 (**permalink**) 04/06/2015, 18:25

¿En la primera de las dos formas que acabas de mostrar no salen los tres números del mismo grupo?

zerobathory · #15 (**permalink**) 08/06/2015, 11:35

No, solo uno, y es el que pertenece a la ultima columna, que es $fila['idotro']

zerobathory · #16 (**permalink**) 08/06/2015, 12:39

a forma de prueba puse el array como:

Código PHP:

Ver original$telefonos[] = array($fila['telefono'], $fila['celular'], $fila['idotro']);

y en el script lo puse asi

Código HTML:

Ver original$(document).ready(function(){
    $( '#telefono' ).autocomplete({
       source: "buscartelefono.php",
    }).data("ui-autocomplete")._renderItem = function (ul, item){
    return $("<li></li>")
        .append("<a>" +item+ "</a>")
        .appendTo(ul);
};

Con esto, me aparece la lista desplegada, pero no aparece ningun dato, aparece un mensaje diciendo [object Object]

Alexis88 · #17 (**permalink**) 10/06/2015, 22:50

Eso sucede porque item es un objeto y debes de acceder a sus propiedades para mostrar los datos.