Untitled

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Ejercicio 19 - Autocompletar</title>
    <script type="text/javascript">
        var sugerencias = null;
        var elementoSeleccionado=-1;
        var sugerencia;
        function inicializa_xhr() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        function autocompleta(e) {
            var tecla = e.keyCode;
            switch (tecla ){
                case 40:// Flecha Abajo
                    if(elementoSeleccionado<sugerencia.length){
                        elementoSeleccionado++;
                        actualizaSugerencias();
                    }

                    break;
                case 38:// Flecha Arriba

                    if(elementoSeleccionado>0){
                        elementoSeleccionado--;
                        actualizaSugerencias();
                    }

                    break;
                case 39: // ENTER o Intro
                    seleccionaElemento();
                    break;
                default:
                    // lanzar peticion al php
                    var muni = document.getElementById("municipio").value;
                    if(muni==""){
                        borraLista();
                    }else{
                    peticion = inicializa_xhr();

                    if (peticion) {
                        peticion.onreadystatechange = muestraInformacion;
                        peticion.open("POST","autocompletaMunicipios.php?nocache=" + Math.random(),true);
                        peticion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                        peticion.send("municipio="+muni);
                    }
                        }

            }

        }
        function muestraInformacion() {
            //llamar a sinresultados si no devuelve nada
            //llamar a actualizaSugerencias si devuelve algo

            if (peticion.readyState == 4) {
                if (peticion.status == 200) {
                    var lista = document.getElementById("municipio");
                    sugerencia = JSON.parse(peticion.responseText);

                    if (sugerencia.length>0){
                        actualizaSugerencias();
                        /*document.getElementById("sugerencias").innerHTML=sugerencia.formateaLista();
                        document.getElementById("sugerencias").style.display="block";*/
                    }
                    else {
                        sinResultados();
                    }
                }
            }

        }
        function actualizaSugerencias() { //0
            //document.getElementById("sugerencias").innerHTML=formateaLista(sugerencia);
            document.getElementById("sugerencias").innerHTML=sugerencia.formateaLista();
            document.getElementById("sugerencias").style.display="block";
        }
        function sinResultados(){
            document.getElementById("sugerencias").innerHTML="No hay resultados.";
            document.getElementById("sugerencias").style.display="block";
        }
        function seleccionaElemento(){
        }
        function borraLista() {
            document.getElementById("sugerencias").innerHTML="";
            document.getElementById("sugerencias").style.display="none";
        }

    /*   function formateaLista( tabla) {
            var cadena="<ul>";
            var i;
            for(i=0;i<sugerencias.length;i++){
                if (i==elementoSeleccionado){
                    cadena+="<li class='seleccionado'>";
                }else{
                    cadena+="<li>";
                }
                cadena+=sugerencias[i];
                cadena+="</li>";
            }
            cadena+="</ul>"
            return cadena;
        }
*/
        Array.prototype.formateaLista = function() {
            var cadena="<ul>";
            var i;
            for(i=0;i<this.length;i++){
                if (i==elementoSeleccionado){
                    cadena+="<li class='seleccionado'>";
                }else{
                    cadena+="<li>";
                }
                cadena+=this[i];
                cadena+="</li>";
            }
            cadena+="</ul>"
            return cadena;
        }

    </script>
    <style type="text/css">
        *{
            margin: 0; padding: 0;
        }
        body {font-family: Arial, Helvetica, sans-serif;}
        #sugerencias {display:none;width:200px; margin-left: 83px; border:1px solid black; }
        #sugerencias ul { font-size:.85em; list-style: none;}
        #sugerencias ul li {padding: .2em; border-bottom: 1px solid silver;}
        .seleccionado {font-weight:bold; background-color: #FFFF00;}

    </style>

</head>

<body>
    <h1>Autocompletar texto</h1>

    <form>
      <label for="municipio">Municipio</label> &nbsp;&nbsp;
      <input type="text" id="municipio" name="municipio" size="30" onkeyup="autocompleta(event);" >
    </form>
    <div id="sugerencias">
    </div>
</body>
</html>