Hola,
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"]);
}
}
Pongo el script de autocompletar
Código:
<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>
Ahora pongo el formulario
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>
La función objeto la meto en el script de AJAX y una vez pasa los datos ejecuta la pagina objetos.php que escribe el JSON
Código:
function 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();
}
}
}
Para empezar me devuelve el error
Código HTML:
Uncaught TypeError: Cannot read property 'lenght' of undefined
Probé a poner en lugar de obje.options poner obje.select, pero en este momento la cadena va vacia, no pasa ningún parametro para que lo recoja la página php donde escribo el JSON.
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);
Este método lo uso con un formulario normal con selects
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> y me funciona sin problema, pero es que quiero ir más allá porque no es del todo operativo tener que buscar en una lista seleccionando sin la opción de autocomplementado.
Alguno de vosotros podría echarme una mano con esto. Agradeciéndolo de antemano. Un Saludo.