Usuari tecleja \u2192 onkeyup= cercar_bd(); \u2192 AJAX envia ‘cercar’ \u2192 PHP te dades+cercar, processa i retorna #resultats \u2192 JavaScript mostra el resultat<\/strong><\/p>\n\n\n\n Tot el proc\u00e9s de consulta es fa de manera asincr\u00f2nica a trav\u00e9s d’AJAX, la qual cosa permet que la p\u00e0gina no es recarregui completament i els resultats es mostrin din\u00e0micament sense interrupcions. Aix\u00f2 fa que l’experi\u00e8ncia de l’usuari sigui m\u00e9s fluida.<\/p>\n\n\n\n flux Usuari tecleja \u2192 onkeyup= cercar_bd(); \u2192 AJAX envia ‘cercar’ \u2192 PHP te dades+cercar, processa i retorna #resultats \u2192 JavaScript mostra el resultat Tot el proc\u00e9s de consulta es fa de manera asincr\u00f2nica a trav\u00e9s d’AJAX, la qual cosa permet … Continua llegint Estructura<\/h2>\n\n\n\n
\/autocompletar\n\u2502\u2500\u2500 \/css\n\u2502 \u251c\u2500\u2500 style.css\n\u2502\u2500\u2500 \/js\n\u2502 \u251c\u2500\u2500 script.js\n\u2502\u2500\u2500 index.html\n\u2502\u2500\u2500 cercar.php\n\u2502\u2500\u2500 db_config.php\n\n<\/code><\/pre>\n\n\n\ncercar.php<\/h2>\n\n\n\n
\nif (isset($_POST['cercar'])) {\n $paraula = $conn->real_escape_string($_POST['cercar']);\n error_log(\"Paraula rebuda: \" . $paraula); \/\/ Registra la paraula rebuda per la crida AJAX\n\n $sql = \"SELECT catala FROM catala_iec WHERE catala LIKE '$paraula%' LIMIT 5\";\n $result = $conn->query($sql);\n\n $respostes = array();\n \n if ($result->num_rows > 0) {\n while ($row = $result->fetch_assoc()) {\n $respostes[] = htmlspecialchars($row['catala']);\n }\n } else {\n $respostes[] = \"No s'han trobat resultats.\";\n }\n \n \/\/ Retornem les dades en format JSON\n echo json_encode($respostes);\n error_log(\"Resposta JSON enviada: \" . json_encode($respostes)); \/\/ Registra la resposta enviada en format JSON\n}\n\n$conn->close();\n?><\/code><\/pre>\n\n\n\n
<\/code><\/pre>\n\n\n\n
\n\n\n\nindex.html<\/h2>\n\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>Autocompletar<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"js\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n\n <h1>Cercador & autocompletat<\/h1>\n\n <!-- Formulari de cerca -->\n <form id=\"cercaForm\" method=\"POST\" action=\"cercar.php\">\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 <script src=\"js\/scripts.js\" defer><\/script>\n<\/body>\n<\/html>\n\n\n<\/code><\/pre>\n\n\n\n
\n\n\n\nCSS<\/h2>\n\n\n\n
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
\n\n\n\njs\/script.js<\/code> (AJAX per a la cerca)<\/mark><\/h2>\n\n\n\n$(document).ready(function () {\n $(\"#cercar\").on(\"keyup\", function () {\n var paraula = $(this).val();\n console.log(\"Tecla premuda: \" + paraula);\n\n if (paraula.length > 0) {\n $.ajax({\n url: \"cercar.php\",\n type: \"POST\",\n data: { cercar: paraula },\n success: function (resposta) {\n console.log(\"Resposta AJAX rebuda\");\n var resultats = JSON.parse(resposta);\n var htmlResultats = resultats.map(function (item) {\n return \"<li class='resultat'>\" + item + \"<\/li>\";\n }).join(\"\");\n $(\"#resultats_autocompletar\").html(htmlResultats);\n },\n error: function () {\n console.error(\"Error en la crida AJAX.\");\n }\n });\n } else {\n $(\"#resultats_autocompletar\").html(\"\"); \/\/ Esborra els resultats si no hi ha text\n }\n });\n\n \/\/ Afegir esdeveniment de clic per als elements de resultat\n $(document).on(\"click\", \".resultat\", function () {\n var paraulaSeleccionada = $(this).text();\n console.log(\"Paraula seleccionada: \" + paraulaSeleccionada);\n $(\"#cercar\").val(paraulaSeleccionada);\n });\n});\n\n<\/code><\/pre>\n\n\n\n
\n\n\n\ndb_config.php<\/h2>\n\n\n\n
<?php\n$host = \"localhost\";\n$user = \"root\"; \/\/ Canvia-ho si cal\n$pass = \"beseit00\"; \/\/ Canvia-ho si cal\n$dbname = \"polidic_cat\"; \/\/ Nom de la teva BD\n\n$conn = new mysqli($host, $user, $pass, $dbname);\n\n\/\/ Comprovar la connexi\u00f3\nif ($conn->connect_error) {\n die(\"Error de connexi\u00f3: \" . $conn->connect_error);\n}\n?>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"