estructura
/autocompletar 2 sense BD
│── style.css (Estils per al formulari i els resultats)
│
│── /js
│ ├── javascripts.js (Logica JavaScript per l'autocompletat)
│
│── index.html (Pàgina principal amb el formulari)
│── cercar.php (No el necessites en aquest cas ja que és una simulació,
│── Bd_conexions
│ ├── conexio_diccionari_bd.php (Simulació de la connexió amb la base de dades)
/autocompletar 2 sense 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>
<script src="js/scripts.js" defer></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>
</body>
</html>
script/javascripts.js (Logica del JavaScript per l’autocompletat)
// Funció que mostra els resultats d'autocompletar
function mostrarAutocompletar() {
const cercarInput = document.getElementById("cercar");
const cercarValue = cercarInput.value.trim();
if (cercarValue.length > 0) {
// Simulació de dades d'autocompletar
const resultats = ['hola', 'adéu', 'bon dia', 'bon vespre', 'gràcies'];
// Filtrar resultats basat en l'input de cerca
const resultatsFiltrats = resultats.filter(paraula =>
paraula.toLowerCase().includes(cercarValue.toLowerCase())
);
// Mostrar els resultats
const ul = document.getElementById("resultats_autocompletar");
ul.innerHTML = ''; // Neteja els resultats anteriors
resultatsFiltrats.forEach(paraula => {
const li = document.createElement("li");
li.textContent = paraula;
li.onclick = function() { seleccionar(paraula); };
ul.appendChild(li);
});
// Mostrar l'ul si hi ha resultats
document.getElementById("resultats_autocompletar_container").style.display = "block";
} else {
// Si l'input està buit, amaga els resultats
document.getElementById("resultats_autocompletar_container").style.display = "none";
}
}
// Funció que selecciona una paraula i la posa a l'input
function seleccionar(paraula) {
document.getElementById("cercar").value = paraula; // Posa el valor seleccionat
document.getElementById("resultats_autocompletar_container").style.display = "none"; // Amaga els resultats
document.getElementById("cercaForm").submit(); // Envia el formulari
}
Fitxer styles.css (Estils per al formulari i els resultats)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
text-align: center;
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#cercar {
width: 60%;
padding: 10px;
font-size: 16px;
margin-right: 10px;
}
button {
padding: 10px;
font-size: 16px;
}
#resultats_autocompletar_container {
position: relative;
max-width: 60%;
margin: 0 auto;
}
#resultats_autocompletar {
background-color: white;
border: 1px solid #ccc;
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
z-index: 1000;
}
#resultats_autocompletar li {
padding: 10px;
cursor: pointer;
}
#resultats_autocompletar li:hover {
background-color: #f0f0f0;
}
Fitxer BD_conexions/conexio_diccionari_bd.php (Simulació de connexió amb la base de dades)
<?php
// Simulació d'una base de dades amb paraules per buscar
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$cercar = isset($_POST['cercar']) ? $_POST['cercar'] : '';
// Dades de prova per simular resultats de cerca
$resultats = ['hola', 'adéu', 'bon dia', 'bon vespre', 'gràcies'];
// Filtrar resultats segons la cerca
$resultats_filtrats = array_filter($resultats, function($paraula) use ($cercar) {
return stripos($paraula, $cercar) !== false;
});
// Retornar els resultats en format HTML
foreach ($resultats_filtrats as $resultat) {
echo "<li onclick=\"seleccionar('$resultat')\">$resultat</li>";
}
}
?>
Explicació dels fitxers:
- index.php: Aquest és el fitxer principal que conté el formulari de cerca i els resultats d’autocompletar. S’hi ha afegit una secció on es mostren els resultats filtrats a mesura que l’usuari escriu.
- scripts.js: Aquest script maneja la lògica de l’autocompletar. Utilitza la funció
mostrarAutocompletar() per filtrar i mostrar els resultats quan l’usuari escriu alguna cosa, i seleccionar() per omplir el camp de cerca amb la paraula seleccionada.
- styles.css: Aquest fitxer conté els estils bàsics 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.
- conexio_diccionari_bd.php: Simula una base de dades que retorna resultats segons el terme de cerca que s’envia per AJAX. Per ara, només simula una cerca de paraules en un array predefinit.
Com provar-ho:
Prova a seleccionar un resultat i veuràs com es completa l’input i es realitza el submit del formulari (simulant una cerca real).
Coloca aquests fitxers en el teu servidor local (XAMPP, WAMP, etc.).
Obre index.php en el navegador. Quan escriguis a l’input de cerca, es mostraran els resultats d’autocompletar sota el camp de cerca.
