Buenas tardes!
Os comento el problemilla que estoy teniendo, se que hay mucha información en google justo de este tema, os aseguro que consulté y no doy con la solución.
Estoy intentando hacer un autocomplete de un campo de texto utilizando ajax, jquery y php.
Os muestro mi código resumido a continuación:
1 fichero.html
<html>
<head>
<script language="JavaScript" type="text/javascript" src="ajax_autocom_mun.js"></script>
<script language="JavaScript" src="jquery-ui-1.10.3.custom/js/jquery-1.10.2.min.js"></script>
<script language="JavaScript" src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<link type="text/css" href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script>
function municipios_completar() {
var mun = autocomMunicipio();
$( "#poblacion_form" ).autocomplete({
source: mun
});
};
</script>
</head>
<body>
<input type="text" name="poblacion_form" onkeyup="municipios_completar();" />
</body> </html>
2 mi fichero ajax
// Función para recoger los datos de PHP según el navegador, se usa siempre.
function objetoAjax()
{
var xmlhttp=false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//Función para recoger los datos del formulario y enviarlos por post
function autocomMunicipio()
{
//recogemos los valores de los inputs
term=document.formulario_cliente.poblacion_form.va lue;
//alert(term);
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del metodo POST
//archivo que realizará la operacion municipios.php
ajax.open("POST", "./comun/ajax/autocom_mun/municipios.php",true);
//cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
ajax.onreadystatechange=function()
{
//la función responseText tiene todos los datos pedidos al servidor
if (ajax.readyState==4) {
eval(ajax.responseText);
//alert(ajax.responseText);
//alert(municipios); estos alert funcionan por lo que la llamada a ajax y la ejecucion de eval es correcta
//alert(municipios[0]);
return municipios;
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("term="+term);
}
3 mi fichero php
<?php
include ('../../conexion.php');
$limite=10;
$con = "SELECT DISTINCT Municipio FROM util_municipios WHERE Municipio LIKE '".$_POST['term']."%' Limit ".$limite;
$query = mysql_query($con,$conexion);
$javascrip='
var municipios=new Array('.$limite.');
';
for ($i = 0; $i < $limite; $i++) {
$row= mysql_fetch_array($query);
$javascrip=$javascrip.' municipios['.$i.']="'.$row["Municipio"].'"
';
}
echo $javascrip ;
?>
Si le paso al autocomplete un array definido en el propio html me funciona sin problema.
Mi funcion "autocomMunicipio()" es correcta, hace la llamada a ajax y tras el "eval" tengo un array llamado Municipios de 10 posiciones.
Sin embargo no me funciona el return, jamas devuelve ese arrray para poderlo usar en la funcion municipios_completar().
Alguien tiene alguna sugerencia?? yo imagino que no lo devuelve correctamente por algo relacionado con el funcionamiento de ajax q desconozco (soy muy nuevo en esto).
Agradezco de antemano cualquier contestación. Un saludo!