estoy intentando implementar en un formulario un sistema de autocomplementado, pero no encuentro la manera, (falta de experiencia, conocimientos etc)...
El error puede encontrarse en el script de Ajax. La metodología es que selecciono un elemento, envio el dato y ejecuta una consulta en php que me devolverá un JSON.
Primeramente hago la query para llenar el formulario:
Código PHP:
$query1 = 'SELECT distinct code, objeto FROM objectos ORDER BY code';
$result1 = pg_query($query1) or die('Query failed: ' . pg_last_error());
$arreglo_php = array();
if(pg_num_rows($result1)==0)
array_push($arreglo_php, "NO Datos");
else{
while ($elemento = pg_fetch_array($result1)) {
array_push($arreglo_php, $elemento["code"]);
}
}
Código:
Ahora pongo el formulario<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 } ?> $("#elemento").autocomplete({ //Usamos el ID de la caja de texto donde lo queremos source: autocompletar //Le decimos que nuestra fuente es el arreglo }); }); </script>
Código HTML:
<form class="recursos2" id="OBJ" name="OBJ" method="post" action="#" onsubmit="return false;"> <input type="text" id="elemento" name="elemento"> <input name="ejecutar1" type="submit" id="btsubmit1" value="OK" onClick="objeto();/> </form>
Código:
Para empezar me devuelve el errorfunction objeto(){ var elemento = document.getElementById("OBJ"); obje = document.getElementById('elemento'); var txt=''; var i; var count = 0; for (i=0; i<obje.options.lenght; i++) { if (obje.options[i].selected) { if (count==0) txt+= "'"+obje.options[i].value+"'"; else txt+= "#'"+obje.options[i].value+"'"; } count++; } url_obje ='elementos='+txt; xhr(url_obje); } var xmlhttp; function xhr(OBJ){ if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = RespuestaModel; xmlhttp.open("POST", "objetos.php", true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //xmlhttp.setRequestHeader("Content-length", 2); //xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(OBJ); } function RespuestaModel(){ if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { storeOB.load(); checktrue1(); } } }
Código HTML:
Uncaught TypeError: Cannot read property 'lenght' of undefined
En la página lo recojo del modo
Código PHP:
$conexion = "host=$db_host port=$db_port dbname=$db_name user=$db_user password=$db_pass";
$dbconn = pg_connect($conexion);
if (!$dbconn){
echo "<center>La conexión con la base de datos no se ha realizado.</center>";
exit;
}
$procesar = $_POST['elemento'];
$query = "SELECT code, objeto, ST_AsGeoJSON(the_geom, 4) AS geojson FROM objectos where code in (".ltrim($procesar,',').") ORDER BY code";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
//
$geojson = array(
'type' => 'FeatureCollection',
'features' => array()
);
$i = 0;
while ($line = pg_fetch_assoc($result)) {
$feature = array(
'geometry' => json_decode($line['geojson'], true),
'properties' => $data[]=$line,
'id' => $i++
);
array_push($geojson['features'], $feature);
}
$loca = json_encode($geojson);
$conta = "datos/objeto" .session_id(). ".json";
//$conta = "data/localiza.json";
$archivo = fopen($conta, "w");
fwrite($archivo, $loca);
fclose($archivo);
Código HTML:
<?php $query1 = 'SELECT distinct code, objeto FROM vw_objects ORDER BY code'; $result1 = pg_query($query1) or die('Query failed: ' . pg_last_error()); ?> <form class="recursos2" id="OBJ" name="OBJ" method="post" action="#" style="display:none;" onsubmit="return false;"> <select name="elemento2" id="elemento"> <option value="">-- Descrip. a buscar --</option> <?php while ($line = pg_fetch_array($result1, null, PGSQL_ASSOC)) { echo "<option value=". $line["code"].">". $line["code"]."</option>"; } ?> </select> <input name="ejecutar2" type="submit" id="btsubmit2" value="OK" onClick="objeto()"/> </form>
Alguno de vosotros podría echarme una mano con esto. Agradeciéndolo de antemano. Un Saludo.