AJAX: creación de lista que se carga según se teclea caracteres

En el siguiente código es un ejemplo de la interacción en donde se va escribiendo caracteres y en la parte de abajo se carga un lista con los elementos que empiezan por lo que se ha escrito. Los datos que se cargan viene de un archivo de texto en el servidor, aunque también puede ser generado por un servicio.

El archivo del servidor contiene lo siguiente:

dosel;dos;tres;cuatro;cinco;seis;siete;siena;siente;cuatrero;tresillo;dos mil;unidad

El código HTML sería el siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>601b</title>
    <style>
        #concep{
            width: 200px;
        }
         #dato{
            width: 192px;
        }
    </style>



    <script type="text/javascript" language="javascript">
        function llama() {
            peticion('http://localhost/X/601.ax');
        }
        function peticion(url) {
            http_request = false;
            http_request = new XMLHttpRequest();
            http_request.overrideMimeType('text/xml');
            http_request.onreadystatechange = respuesta;
            http_request.open('GET', url, true);
            http_request.send();
        }
        function respuesta() {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    carga(http_request.responseText);
                } else {
                    alert('Hubo problemas con la petición.');
                }
            }
        }

        function carga(r) {
            var sel = document.getElementById("concep");
            l=sel.children.length;

            for (i=0;i<l;i++)
                sel.removeChild(sel.children[0]);
            sel.style.visibility="hidden";
            var ret = [];
            ret = r.split(/;/);
            for (i = 0; i < ret.length; i++) {
                var op = document.createElement("option");
                var top = document.createTextNode(ret[i]);
                op.appendChild(top);
                op.onclick=selec;
                entrada=document.getElementById("dato").value;
                if (ret[i].indexOf(entrada, 0) == 0 && entrada!="") {
                    sel.style.visibility="visible";
                    sel.append(op);
                }
            }
        }

        function selec(){
            var sel = document.getElementById("concep");
            var elementos=sel.options.length;
            for (i=0;i<elementos;i++){
                if (sel.options[i].selected){
                    document.getElementById("dato").value=sel.options[i].value;
                    sel.style.visibility="hidden";
                }

            }
        }
    </script>

</head>

<body>
    <div><label for="concep">Selecciona el concepto:</label></div>
    <div><input type="text" id="dato"></div>
    <div><select name="concep" id="concep" multiple="multiple"></select></div>
    
    <script>
        document.getElementById("dato").addEventListener("input", llama);
        document.getElementById("concep").style.visibility="hidden";
    </script>
</body>

</html>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *