{"id":16058,"date":"2025-03-12T17:23:16","date_gmt":"2025-03-12T15:23:16","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16058"},"modified":"2025-03-12T17:38:15","modified_gmt":"2025-03-12T15:38:15","slug":"autocompletar-3","status":"publish","type":"post","link":"http:\/\/www.beseit.net\/?p=16058","title":{"rendered":"Autocompletar 3"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Estructura<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/autocompletar3 amb BD\n\u2502\u2500\u2500 style.css\n\u2502   \n\u2502\u2500\u2500 \/js\n\u2502   \u251c\u2500\u2500 javascripts.js\n\u2502\u2500\u2500 index.html\n\u2502\u2500\u2500 cercar.php\n\u2502\u2500\u2500 Bd_conexions \n    \u251c\u2500\u2500 conexio_diccionari_bd.php<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">index.php<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Simulaci\u00f3 de sessi\u00f3 i configuracions b\u00e0siques\nsession_start();\n?&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ca\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"\/&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"&gt;\n    &lt;title&gt;Eines Ling\u00fc\u00edstiques&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n    &lt;script src=\"js\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;h1&gt;Cercador amb autocompletat&lt;\/h1&gt;\n\n    &lt;!-- Formulari de cerca --&gt;\n    &lt;form id=\"cercaForm\" method=\"POST\" action=\"#\"&gt;\n        &lt;div class=\"search-container\"&gt;\n            &lt;input \n                type=\"text\" \n                id=\"cercar\"\n                name=\"cercar\" \n                onkeyup=\"mostrarAutocompletar()\" \n                placeholder=\"Cerca...\" \n                autofocus\n            &gt;\n            &lt;button type=\"submit\"&gt;Cercar&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n\n    &lt;!-- Contenidor de l'autocompletat --&gt;\n    &lt;div id=\"resultats_autocompletar_container\"&gt;\n        &lt;ul id=\"resultats_autocompletar\"&gt;\n            &lt;!-- Resultats din\u00e0mics via JavaScript --&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;\n   \n    &lt;script src=\"js\/scripts.js\" defer&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">script\/javascripts.js&nbsp;<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Funci\u00f3 per mostrar resultats d'autocompletar\n\nfunction mostrarAutocompletar() {\n    const cercarInput = document.getElementById(\"cercar\");\n    const cercarValue = cercarInput.value.trim();\n  \n    if (cercarValue.length &gt; 0) {\n        \/\/alert(\"linia 8 arriba pero no entra php. Longitud de cercarValue: \" + cercarValue.length);\n        fetch(\"BD_conexions\/conexio_diccionari_bd.php\", {\n            method: \"POST\",\n            headers: { \"Content-Type\": \"application\/x-www-form-urlencoded\" },\n            body: \"cercar=\" + encodeURIComponent(cercarValue)\n        })\n        .then(response =&gt; response.json())\n        .then(resultats =&gt; {\n            const ul = document.getElementById(\"resultats_autocompletar\");\n            ul.innerHTML = '';  \/\/ Neteja els resultats anteriors\n\n            resultats.forEach(paraula =&gt; {\n                const li = document.createElement(\"li\");\n                li.textContent = paraula;\n                li.onclick = function() { seleccionar(paraula); };\n                ul.appendChild(li);\n            });\n\n            document.getElementById(\"resultats_autocompletar_container\").style.display = resultats.length &gt; 0 ? \"block\" : \"none\";\n        })\n        .catch(error =&gt; console.error(\"Error en l'autocompletat:\", error));\n    } else {\n        document.getElementById(\"resultats_autocompletar_container\").style.display = \"none\";\n    }\n}\n\n\/\/ Funci\u00f3 per seleccionar una paraula i posar-la al cercador\nfunction seleccionar(paraula) {\n    document.getElementById(\"cercar\").value = paraula;\n    document.getElementById(\"resultats_autocompletar_container\").style.display = \"none\";\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Estils-<code>styles.css<\/code><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n    font-family: Arial, sans-serif;\n    text-align: center;\n    margin: 50px;\n}\n\ninput {\n    padding: 10px;\n    width: 300px;\n    font-size: 16px;\n    margin-bottom: 10px;\n}\n\n#resultats {\n    margin-top: 20px;\n    border: 1px solid #ddd;\n    width: 300px;\n    margin-left: auto;\n    margin-right: auto;\n    text-align: left;\n    padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">conexio_diccionari_db.php<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nini_set('display_errors', 1);\nini_set('display_startup_errors', 1);\nerror_reporting(E_ALL);\n\nheader(\"Content-Type: application\/json\"); \/\/ Assegura que s'envia JSON\n\n\/\/ Simulaci\u00f3 de resultats per a la prova\necho json_encode(&#91;\"hola\", \"ad\u00e9u\", \"bon dia\", \"bon vespre\", \"gr\u00e0cies\"]);\nexit(); \/\/ Assegura't que no s'envia m\u00e9s contingut despr\u00e9s del JSON\n?><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Estructura index.php script\/javascripts.js&nbsp; Estils-styles.css conexio_diccionari_db.php<\/p>\n","protected":false},"author":2,"featured_media":8179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloc-de-notes"],"_links":{"self":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16058"}],"version-history":[{"count":6,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16058\/revisions"}],"predecessor-version":[{"id":16068,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16058\/revisions\/16068"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/8179"}],"wp:attachment":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16058"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}