autocompletar 2 | Beseit i una mica de xirigol

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.