Autocomplementar con ajax, php, Error

[emeotero]

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&oacute;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.

[Alexis88]

Iniciado por emeotero

Me devuelve el error

Código HTML:

Uncaught TypeError: Cannot read property 'lenght' of undefined

Está mal escrito. La propiedad es length, con la H después de la T.

Saludos

[emeotero]

Hola Alexis88, efectivamente está mal escrito, pero ese no es el problema, quiero decir que lo escribi mal al pasar el codigo en la pregunta.
Estando bien "length" sigue dando el mismo error en Chrome:

Uncaught TypeError: Cannot read property 'length' of undefined

En Firefox me da el siguiente:

TypeError: obje.options is undefined


for (i=0; i<obje.options.length; i++) {

El código que puse es el que uso con elform con los option value, de ahí que me surja la duda de en el script de Ajax ese for (i=0; i<obje.options.length; i++) { esté mal codificado.
Gracias. Un saludo.

[Alexis88]

Como ando con algo de prisa, te dejo este ejemplo que hice con un buscador de datos que trabaja con el widget autocomplete de jQueryUI que es el que veo que usas. Adáptalo a lo que buscas hacer.

Saludos

[emeotero]

Gracias Alexis88!!

El caso es que el problema no es hacer el input automplete que me funciona sin problema, el problema es pasar el parámetro que selecciono, me lo pasa vacio.

[PHPeros]

Código:

<input type="text" id="elemento" name="elemento">
[...]
obje = document.getElementById('elemento');
[...]
for (i=0; i<obje.options.length; i++) {

Espera... ¡Los input de tipo text no tienen la propiedad options!