Auto completar en Jquery

BoKeRoN18 · #1 (**permalink**) 11/12/2015, 19:03

Hola a todos!

Estoy intentando hacer un input de texto que sea autocompletable con JQuery y Mysql, el tema es que entiendo el codigo que he utilizado de una pagina, pero no entiendo porque no me funciona. Lo que hace el codigo es basicamente cargar de mi base de datos la informacion y la guarda en un array el cual usa despues para mostrar la informacion. Os copio el codigo porque no se donde puede estar el error y ya no se que mirar... los script type sabeis si los tengo bien?

saludos y gracias de antemano!!

<link rel="stylesheet" type="text/css" href="/inmo/css/inmo.css" media="screen" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script>
$(function(){
var autocompletar = new Array();
<?php //Esto es un poco de php para obtener lo que necesitamos
for($p = 0;$p < count($arreglo_php); $p++){ //usamos count para saber cuantos elementos hay ?>
autocompletar.push('<?php echo $arreglo_php[$p]; ?>');
<?php } ?>
$("#nom").autocomplete({ //Usamos el ID de la caja de texto donde lo queremos
source: autocompletar //Le decimos que nuestra fuente es el arreglo
});
});
</script>

</HEAD>

<BODY>

<?php

session_start();

if( ( !empty( $_SESSION['user'] ) ) && ( $_SESSION['user'] == "admin" ) )
{

echo "<DIV CLASS='wrapper'>";

?>

<DIV CLASS='nusuario'>

<form action="#" name="customForm" id="customForm" method="post" enctype="multipart/form-data">

<TABLE>

<TR><TD>*NOMBRE ZONA: </TD><TD><INPUT TYPE='TEXT' id='nom' NAME='nom' SIZE='15' required>

<CENTER><TR><TD><INPUT TYPE='submit' VALUE='Acceso' NAME='acceso'></TD><TD><INPUT TYPE='reset' VALUE='En blanco'></TD>

</TR></CENTER>
</TABLE>
</form>

</DIV>

<?php

include $_SERVER['DOCUMENT_ROOT'] . 'inmo/mod/con_bd.php';

$sql = "select nombre from zona order by nombre";
$res = $con->query($sql);

$arreglo_php = array();

if( mysqli_num_rows( $res ) == 0 )
array_push($arreglo_php, "No hay datos");

else
{

while( $nom_zona = $res->fetch_assoc() ){
array_push( $arreglo_php, $nom_zona["nombre"] );
echo $nom_zona["nombre"]."sdf<br>";
}

}

}
else
{
echo "<DIV CLASS='error'>";
echo "NO TIENES ACCESO";
echo "</DIV>";

}

Alexis88 · #2 (**permalink**) 11/12/2015, 19:55

Mejor guíate con este ejemplo de la documentación oficial del widget que estás usando. Los datos los enviarías desde PHP de una forma similar a la siguiente:

Código PHP:

Ver originalecho json_encode($array);

En donde el array debe haber sido llenado previamente con los valores.

Un saludo

BoKeRoN18 · #3 (**permalink**) 12/12/2015, 05:16

Pero es que voy a la pagina esa que me dices y en view source me sale un trozo de codigo que hace referencia a un archivo search.php que no lo ponen...

No entiendo porque no funciona mi codigo ni que estoy haciendo mal :S

Alexis88 · #4 (**permalink**) 12/12/2015, 11:48

Hice referencia al ejemplo de esa página pues tu problema es con JavaScript. No necesitas ver cómo está estructurado ese código ya que en teoría hace lo mismo que tienes hecho, solo que con PHP, por eso fue que te dije que el array que llenes con datos de la BD en PHP, debes parsearlo a JSON y luego imprimirlo.

Mira este ejemplo que hice el año pasado. Te puede servir de guía.

Un saludo

BoKeRoN18 · #5 (**permalink**) 13/12/2015, 17:18

Estoy haciendo uso de la funcion json_encode tal y como pone en esta pagina:

http://www.lawebdelprogramador.com/c...avascript.html

y me queda la parte de JQuery tal que asi:

<script>
$(document).on("ready", function(){

alert("Jquery funciona");

var nomzona = <?php json_encode($arreglo_php);?>

$("#nom").autocomplete({ //Usamos el ID de la caja de texto donde lo queremos
source: nomzona //Le decimos que nuestra fuente es el arreglo
})
})
</script>

Pero lo curioso es que pongo el alert y no me sale nada de nada, sin embargo elimino el resto de codigo y dejo el alert y si se me muestra.

Tu ejemplo funciona de maravilla, solo que ami me gustaria trabajar con algo mas simple que solo implementara un archivo ya que lo tengo que utilizar en 15 archivos diferentes y no quiero crear tantos ficheros

Alexis88 · #6 (**permalink**) 13/12/2015, 23:28

En esta línea:

Código Javascript:

Ver originalvar nomzona = <?php json_encode($arreglo_php);?>

Te falta imprimir al array. Hace falta un echo.

Por otro lado, el hecho de que tengas que utilizar muchos archivos no te conmina a utilizar varios archivos para generar las fuentes de datos. Para esos casos es preferible utilizar una clase que realice las consultas a la base de datos y devuelva el conjunto de datos que se necesite, pudiendo reutilizarlo un sinfín de veces; tan solo tendrías que incluirlo mediante una sentencia include_once en cada archivo en donde necesites utilizar los datos.

Un saludo