Autocomplementar con Jquery

[calcifer1990]

Alguien me puede ayudar necesito crear un textbox que al escribir me valla sugiriendo nombre, según los resultados de una consulta realizada con ajax, esto utilizando jquery ui.

[linuxzero]

Con esta documentacion te debería alcanzar y hasta sobrar, no es muy dificil:

http://jqueryui.com/demos/autocomplete/

Si se te complica entenderlo avisame ;)

Saludos!

[calcifer1990]

Ok muchas gracias así lo entiendo, pero no se como implementarlo con ajax en lugar de un array

[linuxzero]

Código javascript:

Código Javascript:

$.ajax({
    url: "RUTA_AL_PHP",
    type: "post",
    dataType: 'json',
    success: function(datos) {
        $("#idCampo").autocomplete({
            source: datos,
            select: function(event, ui) {
                $('#idCampoHidden').val(ui.item.key);
            }
        });
    }
});
 

En el codigo php tenes que asegurarte de devolver un vector con el dato resultante de la consulta con la siguiente estructura y una vez formado el vector le aplicas el json_encode() y lo imprimis por pantalla para que lo tome el ajax. Quedaria algo asi:

Código PHP:

// TENES QUE HACER EL QUERY DONDE EL WHERE SEA EL LIKE DE LO QUE EL USUARIO TIPEA EN EL CAMPO DEL AUTOCOMPLETE
$resultado = Array('key' => $id_del_resultado, 'value' => $valor_del_resultado);
echo json_encode($resultado);
 

Con este ejemplo necesitas 2 campos: un campo del tipo text donde es donde el usuario va a ingresar la palabra y se le va a autocompletar y otro campo del tipo hidden donde una vez que seleccione la palabra del listado que le ofrece el autocomplete se llenara con el id del valor para la utilizacion de alguna consulta que necesites.

Esta es una forma muy facil de hacer un autocomplete con ajax y json. Cualquier cosa avisame ;)

[calcifer1990]

No entiendo muy bien el archivo php seria algo asi

Código PHP:

$nit = $_GET[id];  
if (!$nit) return; 
 
$sql = "(SELECT id
              FROM tabla
              WHERE LIKE '%id%'  ";
        
$result = mysql_query($sql);
 
$array_resultado =array();
 
while($rows = mysql_fetch_array($result)){
    $array_resultado = Array('key' => $rows[id], 'value' => $rows[id]);
    print_r($array_resultado);
}
 

muchas gracias

[calcifer1990]

perdón envié mal el código php en realidad seria algo asi

Código PHP:

$nit = $_POST[id]; *
if (!$nit) return; 
*
$sql = "(SELECT id
 * * * * * * *FROM tabla
 * * * * * * *WHERE LIKE '%id%' *";
* * * * 
$result = mysql_query($sql);
*
$array_resultado =array();
*
while($rows = mysql_fetch_array($result)){
* * $array_resultado = Array('key' => $rows[id], 'value' => $rows[id]);
* * echo json_encode($array_resultado);
}
 

recibo con POST y cambio el print_r() por json_encode($array_resultado);

[linuxzero]

Si pero el json_encode() hacelo fuera del while, asi envia el vector completo, y no cada posicion del mismo como esta en tu código.

[calcifer1990]

ok aun asi no funciona voy a subir el codigo completo a ver que error encuentras

codigo javascript

Código Javascript:

<script src="./../js/jquery-1.5.1.min.js"></script>
<script src="./../js/jquery-ui-1.8.13.custom.min.js"></script>
 
<script type="text/javascript">
    $(function() {
        $.ajax({
        * * url: "ajax_id.php",
        * * type: "post",
        * * dataType: 'json',
        * * success: function(datos) {
        * * * * $("#id").autocomplete({
        * * * * * * source: datos,
        * * * * * * select: function(event, ui) {
        * * * * * * * * $('#id_hidden').val(ui.item.key);
        * * * * * * }
        * * * * });
        * * }
        });
    });
</script>
 

codigo html

Código HTML:

<input type="text" id="id" name="id"/>
<input type="hidden" id="id_hidden" name="id_hidden" />
 

codigo php

Código PHP:

$nit = $_POST[id]; *
if (!$nit) return; 
*
$sql = "(SELECT id
 * * * * * * *FROM tabla
 * * * * * * *WHERE LIKE '%id%' *";
* * * * 
$result = mysql_query($sql);
*
$array_resultado =array();
*
while($rows = mysql_fetch_array($result)){
* * $array_resultado = Array('key' => $rows[id], 'value' => $rows[id]);
}
 
echo json_encode($array_resultado);
 

[linuxzero]

No se como sera tu campo autocomplete, pero la idea seria mas o menos asi:

Código PHP:

<?php
$nit = $_POST[id];
if (!$nit) return; 
 
$sql = "SELECT id, nombre FROM tabla";
$result = mysql_query($sql);
 
$array_resultado =array();
 
while($rows = mysql_fetch_array($result)){
    $array_resultado = Array('key' => $rows['id'], 'value' => $rows['nombre']);
}
 
echo json_encode($array_resultado);
?>
 

Te comento lo que hice, fijate que la consulta la modifique, trae la dupla id, nombre sin condicion, porque de lo que te devuelve es el vector en json que le pasas al autocomplete que despues el plugin se encarga de buscarlo dentro del array solo por su cuenta, por eso le pasas toda la info completa, sin condicion.

Despues fijate que trae id y nombre, es raro que uses el mismo id para los 2, si es asi, porque tu sistema trabaja asi, cambialo, ami porque me parecio raro, asique este punto que te marco esta sujeto a modificaciones.

Probalo asi y decime! ;)

[calcifer1990]

Ok mira te explicare en Colombia las empresas tiene un identificador llamado nit, es este caso necesito escribir en el input text el numero de nit, por esta razón no veo necesidad de consultar el nombre.

exactamente el código php seria así

Código PHP:

<?php
require_once('../conection.php');
 
$sql = "(SELECT DISTINCT nit
        FROM dx_ventas_ano_actual)
        UNION
        (SELECT DISTINCT nit, nombre
        FROM dx_ventas_ano_historial) ";
        
$result = mysql_query($sql);
 
$array_resultado =array();
while($rows = mysql_fetch_array($result)){
    $array_resultado = Array('key' => $rows['nit'], 'value' => $rows['nit']);
}
 
echo json_encode($array_resultado);
 
?>
 

Consulto los nit existentes en dos tablas

Una duda adicional al cargar el $array_resultado de esta manera, solo tomaría los últimos resultados del hile no??

Esto lo probe con un print_r($array_resultado)

Muchas gracias eres muy amable.

[linuxzero]

tenes que hacer el array acumulativo, que seria asi:

Código PHP:

while($rows = mysql_fetch_array($result)){
    $array_resultado[] = Array('key' => $rows['nit'], 'value' => $rows['nit']);
}
 

Sino te tomaria solo el último, y no todos.

[calcifer1990]

OK funciona a la perfección muchas gracias, solo tendría una ultima duda de casualidad sabes como modificar el css para que no se vean tan grandes las opciones?

Y de nuevo muchísimas gracias.

[linuxzero]

usas el jqueryui? para los estilos?? si es asi, deberias modificar el css del .ui-widget si mal no recuerdo

[calcifer1990]

Que pena volver a molestar con este tema, pero tengo una nueva duda

¿como puedo limitar el numero de registros que se muestran al ir escribiendo en el textbox?

Esto debido a que al escribir en el textbox, el array tiene demasiados registros y esto hace que el navegador se ejecute con mucha lentitud.

[linuxzero]

Proba agregandole un parametro al autocomplete que se llama minLength, asique te obliga a ingresar una cantidad de caracteres minimos para realizar la consulta a la base y devolverte los resultados.

http://stackoverflow.com/questions/4071887/limit-the-result-in-jquery-autocomplete

[calcifer1990]

OK también funciona, pero existe alguna manera de mostrar solo x numero de registros, por ejemplo de solo mostrar los 20 primeros registros

[linuxzero]

Proba con el atributo: maxItemsToShow. Ej:

Código Javascript:

$("#div").autocomplete({
    url:'your-back-end.php'
    minChars: 2,
    maxItemsToShow: 20
});
 

[calcifer1990]

La pruebo pero no funciona, es algo raro en la documentación que he investigado esta atributo no presenta ningun problema tendra algo que ver con utilizar jquery UI?

[linuxzero]

Proba el de UI a ver que te tira..

[calcifer1990]

buscando en el codigo de UI no contiene el atributo maxItemsToShow.

[calcifer1990]

Hola,

Tengo una nueva duda, como puedo saber que NO se ha escogido ninguna opción del autocompletar??

es decir si no escojo ninguna opción de las que este me muestra.

De antemano muchas gracias.

[linuxzero]

depende de como lo configures, hace una prueba facil haciendo un alert del .val()