Search and Display<\/title>\r\n <style>\r\n .container {\r\n max-width: 80vw;\r\n margin: 0 auto;\r\n padding: 20px;\r\n text-align: center;\r\n }\r\n .input-group {\r\n margin-bottom: 15px;\r\n text-align: left;\r\n }\r\n .input-group span {\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n .input-group input {\r\n width: 100%;\r\n padding: 10px;\r\n border-radius: 5px;\r\n border: 1px solid #ccc;\r\n }\r\n .btn {\r\n background-color: #0D9D2C;\r\n color: white;\r\n border: none;\r\n padding: 10px 50px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n .btn:hover {\r\n background-color: #0a7a22;\r\n }\r\n .table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n }\r\n .table th, .table td {\r\n border: 1px solid #ddd;\r\n padding: 8px;\r\n white-space: nowrap; \/* Ensure content stays on one line *\/\r\n }\r\n .table th {\r\n background-color: #f2f2f2;\r\n text-align: left;\r\n }\r\n .table-responsive {\r\n overflow-x: auto;\r\n }\r\n #loadingMessage {\r\n display: none;\r\n font-weight: bold;\r\n color: #0D9D2C;\r\n }\r\n \/* Ocultar las columnas 3, 4, 8 y 17 *\/\r\n .table th:nth-child(3), .table td:nth-child(3),\r\n .table th:nth-child(4), .table td:nth-child(4),\r\n .table th:nth-child(8), .table td:nth-child(8),\r\n .table th:nth-child(17), .table td:nth-child(17) {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\">Nombre:<\/span>\r\n <input class=\"form-control\" type=\"text\" id=\"nameSearch\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\">N\u00famero de recibo:<\/span>\r\n <input class=\"form-control\" type=\"text\" id=\"invoiceSearch\">\r\n <\/div>\r\n <button class=\"btn\" id=\"btnSearch\" type=\"button\">Buscar<\/button>\r\n <div id=\"loadingMessage\">Cargando...<\/div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th># RECIBO<\/th>\r\n <th>CLIENTE<\/th>\r\n <th>Column 3<\/th>\r\n <th>Column 4<\/th>\r\n <th>TICKECT<\/th>\r\n <th>MARCA<\/th>\r\n <th>MEDIDA<\/th>\r\n <th>Column 8<\/th>\r\n <th>C.RECHAZO<\/th>\r\n <th>MOTIVO RECHAZO<\/th>\r\n <th>BANDA<\/th>\r\n <th>FALLA<\/th>\r\n <th>FACTURA CARCASA<\/th>\r\n <th>FECHA FCCR<\/th>\r\n <th>FACTURA REENCAUCHE<\/th>\r\n <th>FECHA FCRE<\/th>\r\n <th>Column 17<\/th>\r\n <th>VENDEDOR<\/th>\r\n <th>GU\u00cdA REMISI\u00d3N<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"resultTable\">\r\n <tr>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <td><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n async function getJson() {\r\n const response = await fetch(\"https:\/\/api-facturas.isollanta.com\");\r\n const jsonList = await response.json();\r\n return jsonList;\r\n }\r\n\r\n function search() {\r\n document.getElementById(\"btnSearch\").addEventListener(\"click\", async function() {\r\n const nameSearch = document.getElementById(\"nameSearch\").value.toLowerCase().trim();\r\n const invoiceSearch = document.getElementById(\"invoiceSearch\").value.replace(\/\\s+\/g, '').trim();\r\n\r\n if (nameSearch === \"\" || invoiceSearch === \"\") {\r\n return;\r\n }\r\n\r\n \/\/ Show loading message\r\n document.getElementById(\"loadingMessage\").style.display = \"block\";\r\n\r\n \/\/ Fetch JSON data\r\n const jsonList = await getJson();\r\n\r\n \/\/ Filter results\r\n const result = jsonList.filter(register => {\r\n const nameWords = register.nombre.toLowerCase().split(' ');\r\n const nameMatch = nameWords.some(word => nameSearch.includes(word));\r\n const invoiceMatch = register.numdocref.toString().replace(\/\\s+\/g, '') === invoiceSearch;\r\n return nameMatch && invoiceMatch;\r\n });\r\n\r\n \/\/ Hide loading message\r\n document.getElementById(\"loadingMessage\").style.display = \"none\";\r\n\r\n \/\/ Set information\r\n setInformation(result);\r\n });\r\n }\r\n\r\n function setInformation(result){\r\n const table = document.getElementById(\"resultTable\");\r\n document.getElementById(\"resultTable\").innerHTML = \"\";\r\n result.forEach(item => {\r\n const row = table.insertRow();\r\n Object.values(item).forEach(value => {\r\n const cell = row.insertCell();\r\n cell.textContent = value;\r\n });\r\n });\r\n }\r\n\r\n window.onload = function() {\r\n search();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Consulta el estado de tus productos Search and Display Nombre: N\u00famero de recibo: Buscar Cargando… # RECIBO CLIENTE Column 3 Column 4 TICKECT MARCA MEDIDA Column 8 C.RECHAZO MOTIVO RECHAZO BANDA FALLA FACTURA CARCASA FECHA FCCR FACTURA REENCAUCHE FECHA FCRE Column 17 VENDEDOR GU\u00cdA REMISI\u00d3N<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/isollanta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=97"}],"version-history":[{"count":100,"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":1353,"href":"https:\/\/isollanta.com\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions\/1353"}],"wp:attachment":[{"href":"https:\/\/isollanta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}