Bien! consigo hacerlo con un select, intenté hacerlo para un input pero no me sale.
Tengo un formulario con dos inputs, uno lo uso para dar de alta un dato y otro para visualizarlo, en función de si quiero darlo de alta o visualizarlo muestro un div u otro via jquery.
El input de alta tiene un script de autompletar, primero una consulta a la BD
Código PHP:
<?php
$query_consulta = 'SELECT dato1, dato2 FROM tabla ORDER BY dat02';
$result = pg_query($query_consulta) or die ('Query failed: '. pg_last_error());
$arreglo_php = array();
if(pg_num_rows($result) == 0)
array_push($arreglo_php, "NO hay datos");
else{
while ($inter = pg_fetch_array($result, null, PGSQL_ASSOC)){
array_push($arreglo_php, $inter['dato1'].':'.$inter['dato2']);
}
}
?>
continúa el script de autocompletar
Código HTML:
<script>
$(function(){
var autocompletar = new Array();
<?php
for($p = 0;$p < count($arreglo_php); $p++){ ?>
autocompletar.push('<?php echo $arreglo_php[$p]; ?>');
<?php } ?>
//alert(autocompletar);
$("#interComplete").autocomplete({
source: autocompletar,
minLength:2,
select: function(event, ui){
var interIdNombre = ui.item ? ui.item.label : '';
var arrayinter = interIdNombre.split(":");
$('#idInter').val(arrayinter[0]);
$('#interComplete').val(arrayinter[1]);
obtenDatosInter(arrayinter[0]);//obtiene los datos para mostrar en inputs de formulario
return false;
},open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>").append("<a>" + item.label.split(":")[1] + "</a>").appendTo(ul);
};
});
</script>
<!-- cuando quiero ver un dato uso este y lo oculto cuando quiero introducir un dato -->
<div id="NomCom">
<p>Nombre: <input type="text" id="interComplete" class="intCom" name="interComplete" placeholder=" introduzca nombre " ></p><br>
</div>
<div id="NomAna" style="display:none;"><!--lo activo para meter dato -->
<p>Nombre: <input type="text" id="NombreInter" class="intCom" name="NombreInter" placeholder=" introduzca nombre "></p><br>
</div>
<!-- input donde meto el id después de separar el id del nombre -->
<input type="hidden" name="idInter" id="idInter" onfocus= "obtenDatosInter(this.value)" value=""></input> Hago la petición AJAX
Código:
function blabla(){
divInter = document.getElementById('NomCom');
nombre = document.getElementById('NombreInter').value;
..
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
divInter.innerHTML = xmlhttp.responseText;
//divResultado2.innerHTML = xmlhttp.responseText;
}
};
...
}
En el response en la consola veo que cuando envío un dato nuevo, aparece todos los datos del input autocomplete, como cuando lo envío al hacerlo desde un SELECT, pero cuando quiero ejecutar el autocomplete en el input del div NomCom no funciona el script. Seguro que es una chorrada que se me escapa, pero no lo veo.
Alguien me presta sus dos ojos para ver que no veo yo. Gracias!
