{"id":16041,"date":"2025-03-11T21:37:28","date_gmt":"2025-03-11T19:37:28","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16041"},"modified":"2025-03-11T22:03:07","modified_gmt":"2025-03-11T20:03:07","slug":"autocompletar-2","status":"publish","type":"post","link":"http:\/\/www.beseit.net\/?p=16041","title":{"rendered":"autocompletar 2"},"content":{"rendered":"\n

estructura<\/h2>\n\n\n\n
\/autocompletar 2 sense BD\n\u2502\u2500\u2500 style.css               (Estils per al formulari i els resultats)\n\u2502   \n\u2502\u2500\u2500 \/js\n\u2502   \u251c\u2500\u2500 javascripts.js      (Logica JavaScript per l'autocompletat)\n\u2502\n\u2502\u2500\u2500 index.html              (P\u00e0gina principal amb el formulari)\n\u2502\u2500\u2500 cercar.php              (No el necessites en aquest cas ja que \u00e9s una simulaci\u00f3, \n\u2502\u2500\u2500 Bd_conexions \n\u2502   \u251c\u2500\u2500 conexio_diccionari_bd.php   (Simulaci\u00f3 de la connexi\u00f3 amb la base de dades)\n<\/code><\/pre>\n\n\n\n
\n\/autocompletar 2 sense 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
index.php<\/h2>\n\n\n\n
<?php\n\/\/ Simulaci\u00f3 de sessi\u00f3 i configuracions b\u00e0siques\nsession_start();\n?>\n\n<!DOCTYPE html>\n<html lang=\"ca\">\n<head>\n    <meta charset=\"UTF-8\"\/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n    <title>Eines Ling\u00fc\u00edstiques<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <script src=\"js\/jquery.min.js\"><\/script>\n    <script src=\"js\/scripts.js\" defer><\/script>\n<\/head>\n<body>\n\n    <h1>Cercador amb autocompletat<\/h1>\n\n    <!-- Formulari de cerca -->\n    <form id=\"cercaForm\" method=\"POST\" action=\"#\">\n        <div class=\"search-container\">\n            <input \n                type=\"text\" \n                id=\"cercar\"\n                name=\"cercar\" \n                onkeyup=\"mostrarAutocompletar()\" \n                placeholder=\"Cerca...\" \n                autofocus\n            >\n            <button type=\"submit\">Cercar<\/button>\n        <\/div>\n    <\/form>\n\n    <!-- Contenidor de l'autocompletat -->\n    <div id=\"resultats_autocompletar_container\">\n        <ul id=\"resultats_autocompletar\">\n            <!-- Resultats din\u00e0mics via JavaScript -->\n        <\/ul>\n    <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
script\/javascripts.js (Logica del JavaScript per l’autocompletat)<\/h2>\n\n\n\n
\/\/ Funci\u00f3 que mostra els resultats d'autocompletar\nfunction mostrarAutocompletar() {\n    const cercarInput = document.getElementById(\"cercar\");\n    const cercarValue = cercarInput.value.trim();\n\n    if (cercarValue.length > 0) {\n        \/\/ Simulaci\u00f3 de dades d'autocompletar\n        const resultats = ['hola', 'ad\u00e9u', 'bon dia', 'bon vespre', 'gr\u00e0cies'];\n\n        \/\/ Filtrar resultats basat en l'input de cerca\n        const resultatsFiltrats = resultats.filter(paraula => \n            paraula.toLowerCase().includes(cercarValue.toLowerCase())\n        );\n\n        \/\/ Mostrar els resultats\n        const ul = document.getElementById(\"resultats_autocompletar\");\n        ul.innerHTML = '';  \/\/ Neteja els resultats anteriors\n\n        resultatsFiltrats.forEach(paraula => {\n            const li = document.createElement(\"li\");\n            li.textContent = paraula;\n            li.onclick = function() { seleccionar(paraula); };\n            ul.appendChild(li);\n        });\n\n        \/\/ Mostrar l'ul si hi ha resultats\n        document.getElementById(\"resultats_autocompletar_container\").style.display = \"block\";\n    } else {\n        \/\/ Si l'input est\u00e0 buit, amaga els resultats\n        document.getElementById(\"resultats_autocompletar_container\").style.display = \"none\";\n    }\n}\n\n\/\/ Funci\u00f3 que selecciona una paraula i la posa a l'input\nfunction seleccionar(paraula) {\n    document.getElementById(\"cercar\").value = paraula; \/\/ Posa el valor seleccionat\n    document.getElementById(\"resultats_autocompletar_container\").style.display = \"none\"; \/\/ Amaga els resultats\n    document.getElementById(\"cercaForm\").submit(); \/\/ Envia el formulari\n}\n<\/code><\/pre>\n\n\n\n
Fitxer styles.css<\/code> (Estils per al formulari i els resultats)<\/h2>\n\n\n\n
body {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n}\n\nh1 {\n    text-align: center;\n}\n\n.search-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n#cercar {\n    width: 60%;\n    padding: 10px;\n    font-size: 16px;\n    margin-right: 10px;\n}\n\nbutton {\n    padding: 10px;\n    font-size: 16px;\n}\n\n#resultats_autocompletar_container {\n    position: relative;\n    max-width: 60%;\n    margin: 0 auto;\n}\n\n#resultats_autocompletar {\n    background-color: white;\n    border: 1px solid #ccc;\n    list-style-type: none;\n    padding: 0;\n    margin: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 1000;\n}\n\n#resultats_autocompletar li {\n    padding: 10px;\n    cursor: pointer;\n}\n\n#resultats_autocompletar li:hover {\n    background-color: #f0f0f0;\n}\n<\/code><\/pre>\n\n\n\n
Fitxer BD_conexions\/conexio_diccionari_bd.php<\/code> (Simulaci\u00f3 de connexi\u00f3 amb la base de dades)<\/h2>\n\n\n\n
<?php\n\/\/ Simulaci\u00f3 d'una base de dades amb paraules per buscar\nif ($_SERVER[\"REQUEST_METHOD\"] == \"POST\") {\n    $cercar = isset($_POST['cercar']) ? $_POST['cercar'] : '';\n    \n    \/\/ Dades de prova per simular resultats de cerca\n    $resultats = ['hola', 'ad\u00e9u', 'bon dia', 'bon vespre', 'gr\u00e0cies'];\n\n    \/\/ Filtrar resultats segons la cerca\n    $resultats_filtrats = array_filter($resultats, function($paraula) use ($cercar) {\n        return stripos($paraula, $cercar) !== false;\n    });\n\n    \/\/ Retornar els resultats en format HTML\n    foreach ($resultats_filtrats as $resultat) {\n        echo \"<li onclick=\\\"seleccionar('$resultat')\\\">$resultat<\/li>\";\n    }\n}\n?>\n<\/code><\/pre>\n\n\n\n
Explicaci\u00f3 dels fitxers:<\/strong><\/p>\n\n\n\n
    \n
  1. index.php<\/strong>: Aquest \u00e9s el fitxer principal que cont\u00e9 el formulari de cerca i els resultats d’autocompletar. S’hi ha afegit una secci\u00f3 on es mostren els resultats filtrats a mesura que l’usuari escriu.<\/li>\n\n\n\n
  2. scripts.js<\/strong>: Aquest script maneja la l\u00f2gica de l’autocompletar. Utilitza la funci\u00f3 mostrarAutocompletar()<\/code> per filtrar i mostrar els resultats quan l’usuari escriu alguna cosa, i seleccionar()<\/code> per omplir el camp de cerca amb la paraula seleccionada.<\/li>\n\n\n\n
  3. styles.css<\/strong>: Aquest fitxer cont\u00e9 els estils b\u00e0sics per al disseny del formulari i els resultats d’autocompletar. Els estils estan dissenyats per tenir una caixa de cerca amb un estil net i mostrar els resultats de cerca de manera interactiva.<\/li>\n\n\n\n
  4. conexio_diccionari_bd.php<\/strong>: Simula una base de dades que retorna resultats segons el terme de cerca que s’envia per AJAX. Per ara, nom\u00e9s simula una cerca de paraules en un array predefinit.<\/li>\n<\/ol>\n\n\n\n
    Com provar-ho:<\/h2>\n\n\n\n
    Prova a seleccionar un resultat<\/strong> i veur\u00e0s com es completa l’input i es realitza el submit del formulari (simulant una cerca real).<\/p>\n\n\n\n
    Coloca aquests fitxers<\/strong> en el teu servidor local (XAMPP, WAMP, etc.).<\/p>\n\n\n\n
    Obre index.php<\/code><\/strong> en el navegador. Quan escriguis a l’input de cerca, es mostraran els resultats d’autocompletar sota el camp de cerca.<\/p>\n","protected":false},"excerpt":{"rendered":"
    estructura index.php script\/javascripts.js (Logica del JavaScript per l’autocompletat) Fitxer styles.css (Estils per al formulari i els resultats) Fitxer BD_conexions\/conexio_diccionari_bd.php (Simulaci\u00f3 de connexi\u00f3 amb la base de dades) Explicaci\u00f3 dels fitxers: Com provar-ho: Prova a seleccionar un resultat i veur\u00e0s com … Continua llegint →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":8179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16041","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\/16041","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=16041"}],"version-history":[{"count":9,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16041\/revisions"}],"predecessor-version":[{"id":16057,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16041\/revisions\/16057"}],"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=16041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16041"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}