Estructura
/autocompletar3 amb BD
│── style.css
│
│── /js
│ ├── javascripts.js
│── index.html
│── cercar.php
│── Bd_conexions
├── conexio_diccionari_bd.php
index.php
<?php
// Simulació de sessió i configuracions bàsiques
session_start();
?>
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Eines Lingüístiques</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<h1>Cercador amb autocompletat</h1>
<!-- Formulari de cerca -->
<form id="cercaForm" method="POST" action="#">
<div class="search-container">
<input
type="text"
id="cercar"
name="cercar"
onkeyup="mostrarAutocompletar()"
placeholder="Cerca..."
autofocus
>
<button type="submit">Cercar</button>
</div>
</form>
<!-- Contenidor de l'autocompletat -->
<div id="resultats_autocompletar_container">
<ul id="resultats_autocompletar">
<!-- Resultats dinàmics via JavaScript -->
</ul>
</div>
<script src="js/scripts.js" defer></script>
</body>
</html>
script/javascripts.js
// Funció per mostrar resultats d'autocompletar
function mostrarAutocompletar() {
const cercarInput = document.getElementById("cercar");
const cercarValue = cercarInput.value.trim();
if (cercarValue.length > 0) {
//alert("linia 8 arriba pero no entra php. Longitud de cercarValue: " + cercarValue.length);
fetch("BD_conexions/conexio_diccionari_bd.php", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: "cercar=" + encodeURIComponent(cercarValue)
})
.then(response => response.json())
.then(resultats => {
const ul = document.getElementById("resultats_autocompletar");
ul.innerHTML = ''; // Neteja els resultats anteriors
resultats.forEach(paraula => {
const li = document.createElement("li");
li.textContent = paraula;
li.onclick = function() { seleccionar(paraula); };
ul.appendChild(li);
});
document.getElementById("resultats_autocompletar_container").style.display = resultats.length > 0 ? "block" : "none";
})
.catch(error => console.error("Error en l'autocompletat:", error));
} else {
document.getElementById("resultats_autocompletar_container").style.display = "none";
}
}
// Funció per seleccionar una paraula i posar-la al cercador
function seleccionar(paraula) {
document.getElementById("cercar").value = paraula;
document.getElementById("resultats_autocompletar_container").style.display = "none";
}
Estils-styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input {
padding: 10px;
width: 300px;
font-size: 16px;
margin-bottom: 10px;
}
#resultats {
margin-top: 20px;
border: 1px solid #ddd;
width: 300px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 10px;
}
conexio_diccionari_db.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
header("Content-Type: application/json"); // Assegura que s'envia JSON
// Simulació de resultats per a la prova
echo json_encode(["hola", "adéu", "bon dia", "bon vespre", "gràcies"]);
exit(); // Assegura't que no s'envia més contingut després del JSON
?>
