{"id":276,"date":"2023-02-09T18:49:50","date_gmt":"2023-02-09T18:49:50","guid":{"rendered":"http:\/\/javigomez.org\/?p=276"},"modified":"2025-09-29T20:34:09","modified_gmt":"2025-09-29T20:34:09","slug":"ajax-creacion-de-lista-que-se-carga-segun-se-teclea-caracteres","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/02\/09\/ajax-creacion-de-lista-que-se-carga-segun-se-teclea-caracteres\/","title":{"rendered":"AJAX: creaci\u00f3n de lista que se carga seg\u00fan se teclea caracteres"},"content":{"rendered":"\n

En el siguiente c\u00f3digo es un ejemplo de la interacci\u00f3n 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\u00e9n puede ser generado por un servicio.<\/p>\n\n\n\n

El archivo del servidor contiene lo siguiente:<\/p>\n\n\n\n

dosel;dos;tres;cuatro;cinco;seis;siete;siena;siente;cuatrero;tresillo;dos mil;unidad<\/code><\/pre>\n\n\n\n
El c\u00f3digo HTML ser\u00eda el siguiente:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>601b<\/title>\n    <style>\n        #concep{\n            width: 200px;\n        }\n         #dato{\n            width: 192px;\n        }\n    <\/style>\n\n\n\n    <script type=\"text\/javascript\" language=\"javascript\">\n        function llama() {\n            peticion('http:\/\/localhost\/X\/601.ax');\n        }\n        function peticion(url) {\n            http_request = false;\n            http_request = new XMLHttpRequest();\n            http_request.overrideMimeType('text\/xml');\n            http_request.onreadystatechange = respuesta;\n            http_request.open('GET', url, true);\n            http_request.send();\n        }\n        function respuesta() {\n            if (http_request.readyState == 4) {\n                if (http_request.status == 200) {\n                    carga(http_request.responseText);\n                } else {\n                    alert('Hubo problemas con la petici\u00f3n.');\n                }\n            }\n        }\n\n        function carga(r) {\n            var sel = document.getElementById(\"concep\");\n            l=sel.children.length;\n\n            for (i=0;i<l;i++)\n                sel.removeChild(sel.children[0]);\n            sel.style.visibility=\"hidden\";\n            var ret = [];\n            ret = r.split(\/;\/);\n            for (i = 0; i < ret.length; i++) {\n                var op = document.createElement(\"option\");\n                var top = document.createTextNode(ret[i]);\n                op.appendChild(top);\n                op.onclick=selec;\n                entrada=document.getElementById(\"dato\").value;\n                if (ret[i].indexOf(entrada, 0) == 0 && entrada!=\"\") {\n                    sel.style.visibility=\"visible\";\n                    sel.append(op);\n                }\n            }\n        }\n\n        function selec(){\n            var sel = document.getElementById(\"concep\");\n            var elementos=sel.options.length;\n            for (i=0;i<elementos;i++){\n                if (sel.options[i].selected){\n                    document.getElementById(\"dato\").value=sel.options[i].value;\n                    sel.style.visibility=\"hidden\";\n                }\n\n            }\n        }\n    <\/script>\n\n<\/head>\n\n<body>\n    <div><label for=\"concep\">Selecciona el concepto:<\/label><\/div>\n    <div><input type=\"text\" id=\"dato\"><\/div>\n    <div><select name=\"concep\" id=\"concep\" multiple=\"multiple\"><\/select><\/div>\n    \n    <script>\n        document.getElementById(\"dato\").addEventListener(\"input\", llama);\n        document.getElementById(\"concep\").style.visibility=\"hidden\";\n    <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
En el siguiente c\u00f3digo es un ejemplo de la interacci\u00f3n en donde se va escribiendo caracteres y en la parte de abajo se carga un … <\/p>\n","protected":false},"author":1,"featured_media":277,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[21,204],"class_list":["post-276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ajax","tag-javascript"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":950,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/276\/revisions\/950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/277"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}