hola amigos he estado queriendo hacer un codigo para autocompletar y pues como soy nuevo en esto quiero saber que es lo que estyoy haciendo mal.
este codigo lo encontre en una web y lo quise tratar de modificar para que cargara los datos de una bd pero pues no me funciona y no se porque haber si alguien puede ayudarme
aqui esta el codigo php
Código PHP:
<?php
include("../config.php");
$sql="SELECT carrera FROM egresados";
$res=mysql_query($sql);
while($row=mysql_fetch_array($res))
{
$datos[count($datos)]=$row["carrera"];
echo $datos;
}
$texto = $_GET["texto"];
// Devuelvo el XML con la palabra que mostramos (con los '_') y si hay éxito o no
$xml = '<?xml version="1.0" standalone="yes"?>';
$xml .= '<datos>';
foreach ($datos as $dato) {
if (strpos(strtoupper($dato), strtoupper($texto)) === 0 OR $texto == "") {
$xml .= '<pais>'.$dato.'</pais>';
}
}
$xml .= '</datos>';
header('Content-type: text/xml');
echo $xml;
?>
y aqui esta el codigo html con el ajax
Código HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - AJAX</title>
<style type="text/css">
div.contenedor {
position: relative;
width: 100px;
}
input {
font-family: Arial;
color: #008585;
font-size: 8pt;
border: 1px solid #008585;
padding-left: 3px;
width: 130px;
}
div.fill {
font-family: Arial;
font-size: 8pt;
display: none;
width: 128px;
position:absolute;
color: #E0EBEB;
background-color: #E0EBEB;
border: 1px solid #008585;
overflow: auto;
height: 150px;
top: -1px;
}
tr.fill {
font-family: Arial;
font-size: 8pt;
color: #E0EBEB;
background-color: #008585;
border: 1px solid #008585;
}
tr {
font-family: Arial;
font-size: 8pt;
background-color: #E0EBEB;
color: #008585;
border: 1px solid #E0EBEB;
}
</style>
<script type="text/javascript">
var IE = navigator.appName.toLowerCase().indexOf("microsoft") > -1;
var Mozilla = navigator.appName.toLowerCase().indexOf("netscape") > -1;
var textoAnt = "";
var posicionListaFilling = 0;
var datos = new Array();
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function cargaLista(evt, obj, txt) {
ajax = ajaxobj();
ajax.open("GET", "paises.php?texto="+txt, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
var datos = ajax.responseXML;
var paises = datos.getElementsByTagName("pais");
var listaPaises = new Array();
if (paises) {
for (var i=0; i<paises.length; i++) {
listaPaises[listaPaises.length] = paises[i].firstChild.data;
}
}
escribeLista(obj, listaPaises);
}
}
ajax.send(null);
}
function escribeLista(obj, lista) {
var html = "";
var fill = document.getElementById('lista');
if (lista.length == 0) {
// Si la lista es vacia no la mostramos
fill.style.display = "none";
} else {
// Creamos una tabla con
// todos los elementos encontrados
fill.style.display = "block";
var html='<table cellspacing="0" '+
'cellpadding="0" border="0" width="100%">';
for (var i=0; i<lista.length; i++) {
html += '<tr id="tr'+obj.id+i+
'" '+(posicionListaFilling == i?
' class="fill" ': '')+
' onmouseover="seleccionaFilling(\'tr'+
obj.id+'\', '+i+
')" onmousedown="seleccionaTextoFilling(\'tr'+
obj.id+'\', '+i+')">';
html += '<td>'+lista[i]+'</td></tr>';
}
html += '</table>';
}
// Escribimos la lista
fill.innerHTML = html;
}
// Muestra las coincidencias en la lista
function inputFilling(evt, obj) {
var fill = document.getElementById('lista');
var elems = datos;
var tecla = "";
var lista = new Array();
var res = obj.value;
var borrar = false;
// Almaceno la tecla pulsada
if (!IE) {
tecla = evt.which;
} else {
tecla = evt.keyCode;
}
var texto;
// Si la tecla que pulso es una
// letra o un espacio, o el intro
// o la tecla borrar, almaceno lo
// que debo buscar
if (!String.fromCharCode(tecla).match(/(\w|\s)/) &&
tecla != 8 &&
tecla != 13) {
texto = textoAnt;
} else {
texto = obj.value;
}
textoAnt = texto;
// Si el texto es distinto de vacio
// o se pulsa ARRIBA o ABAJO
// hago llamada AJAX para que
// me devuelva la lista de palabras
// que coinciden con lo que hay
// escrito en la caja
if ((texto != null && texto != "")
|| (tecla == 40 || tecla == 38)) {
cargaLista(evt, obj, texto);
}
// Según la letra que se pulse
if (tecla == 37) { // Izquierda
// No hago nada
} else if (tecla == 38) { // Arriba
// Subo la posicion en la
// lista desplegable una posición
if (posicionListaFilling > 0) {
posicionListaFilling--;
}
// Corrijo la posición del scroll
fill.scrollTop = posicionListaFilling*14;
} else if (tecla == 39) { // Derecha
// No hago nada
} else if (tecla == 40) { // Abajo
if (obj.value != "") {
// Si no es la última palabra
// de la lista
if (posicionListaFilling < lista.length-1) {
// Corrijo el scroll
fill.scrollTop = posicionListaFilling*14;
// Bajo la posición de la lista
posicionListaFilling++;
}
}
} else if (tecla == 8) { // Borrar <-
// Se sube la lista del todo
posicionListaFilling = 0;
// Se permite borrar
borrar = true;
} else if (tecla == 13) { // Intro
// Deseleccionamos el texto
if (obj.createTextRange) {
var r = obj.createTextRange();
r.moveStart("character",
obj.value.length+1);
r.moveEnd("character",
obj.value.length+1);
r.select();
} else if (obj.setSelectionRange) {
obj.setSelectionRange(
obj.value.length+1,
obj.value.length+1);
}
// Ocultamos la lista
fill.style.display = "none";
// Ponemos el puntero de
// la lista arriba del todo
posicionListaFilling = 0;
// Controlamos el scroll
fill.scrollTop = 0;
return true;
} else {
// En otro caso que siga
// escribiendo
posicionListaFilling = 0;
fill.scrollTop = 0;
}
// Si no se ha borrado
if (!borrar) {
if (lista.length != 0) {
// Seleccionamos la parte del texto
// que corresponde a lo que aparece
// en la primera posición de la lista
// menos el texto que realmente hemos
// escrito
obj.value = lista[posicionListaFilling];
if (obj.createTextRange) {
var r = obj.createTextRange();
r.moveStart("character",
texto.length);
r.moveEnd("character",
lista[posicionListaFilling].length);
r.select();
} else if (obj.setSelectionRange) {
obj.setSelectionRange(
texto.length,
lista[posicionListaFilling].length);
}
}
}
return true;
}
// Introduce el texto seleccionado
function setInput(obj, fill) {
obj.value = textoAnt;
fill.style.display = "none";
posicionListaFilling = 0;
}
// Cambia el estilo de
// la palabra seleccionada
// de la lista
function seleccionaFilling(id, n) {
document.getElementById(id +
n).className = "fill";
document.getElementById(id +
posicionListaFilling).className = "";
posicionListaFilling = n;
}
// Pasa el texto del filling a la caja
function seleccionaTextoFilling (id, n) {
textoAnt = document.getElementById(id +
n).firstChild.innerHTML;
posicionListaFilling = 0;
}
// Cambia la imagen cuando se pone
// encima el raton (nombre.ext
// por _nombre.ext)
function cambiarImagen(obj, ok) {
var marcada = obj.src.indexOf("/_") > 0;
if (ok) {
if (!marcada) {
var ruta = obj.src.substring(
0,
obj.src.lastIndexOf("/")+1)+
"_"+obj.src.substring(
obj.src.lastIndexOf("/")+1);
obj.src = ruta;
}
} else {
if (marcada) {
var ruta = ""+obj.src.substring(
0, obj.src.lastIndexOf("_"))+
obj.src.substring(
obj.src.lastIndexOf("/")+2);
obj.src = ruta;
}
}
}
</script>
</head>
<body>
<div>
<input type="text" id="input-fill" autocomplete="off"
onkeyup="inputFilling(event, this)"
onblur="setInput(this, document.getElementById('lista'))">
<img src="abajo.gif" border="0" onmouseover="cambiarImagen(this, true)"
onmouseout="cambiarImagen(this, false)" class="boton"
onclick="cargaLista(event, document.getElementById('input-fill'), '')" alt="Mostrar" />
<div class="contenedor"><div id="lista" class="fill"></div></div>
</div>
</div>
</body>
</html>