Autocompletar

Publicat el per

flux

Usuari tecleja → onkeyup= cercar_bd(); → AJAX envia ‘cercar’ → PHP te dades+cercar, processa i retorna #resultats → JavaScript mostra el resultat

Tot el procés de consulta es fa de manera asincrònica a través d’AJAX, la qual cosa permet que la pàgina no es recarregui completament i els resultats es mostrin dinàmicament sense interrupcions. Això fa que l’experiència de l’usuari sigui més fluida.

Estructura

/autocompletar
│── /css
│   ├── style.css
│── /js
│   ├── script.js
│── index.html
│── cercar.php
│── db_config.php

cercar.php


if (isset($_POST['cercar'])) {
    $paraula = $conn->real_escape_string($_POST['cercar']);
    error_log("Paraula rebuda: " . $paraula); // Registra la paraula rebuda per la crida AJAX

    $sql = "SELECT catala FROM catala_iec WHERE catala LIKE '$paraula%' LIMIT 5";
    $result = $conn->query($sql);

    $respostes = array();
    
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $respostes[] = htmlspecialchars($row['catala']);
        }
    } else {
        $respostes[] = "No s'han trobat resultats.";
    }
    
    // Retornem les dades en format JSON
    echo json_encode($respostes);
    error_log("Resposta JSON enviada: " . json_encode($respostes)); // Registra la resposta enviada en format JSON
}

$conn->close();
?>



index.html

<!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>Autocompletar</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>

    <h1>Cercador & autocompletat</h1>

    <!-- Formulari de cerca -->
    <form id="cercaForm" method="POST" action="cercar.php">
        <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>

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;
}

js/script.js (AJAX per a la cerca)

$(document).ready(function () {
    $("#cercar").on("keyup", function () {
        var paraula = $(this).val();
        console.log("Tecla premuda: " + paraula);

        if (paraula.length > 0) {
            $.ajax({
                url: "cercar.php",
                type: "POST",
                data: { cercar: paraula },
                success: function (resposta) {
                    console.log("Resposta AJAX rebuda");
                    var resultats = JSON.parse(resposta);
                    var htmlResultats = resultats.map(function (item) {
                        return "<li class='resultat'>" + item + "</li>";
                    }).join("");
                    $("#resultats_autocompletar").html(htmlResultats);
                },
                error: function () {
                    console.error("Error en la crida AJAX.");
                }
            });
        } else {
            $("#resultats_autocompletar").html(""); // Esborra els resultats si no hi ha text
        }
    });

    // Afegir esdeveniment de clic per als elements de resultat
    $(document).on("click", ".resultat", function () {
        var paraulaSeleccionada = $(this).text();
        console.log("Paraula seleccionada: " + paraulaSeleccionada);
        $("#cercar").val(paraulaSeleccionada);
    });
});

db_config.php

<?php
$host = "localhost";
$user = "root";       // Canvia-ho si cal
$pass = "beseit00";           // Canvia-ho si cal
$dbname = "polidic_cat"; // Nom de la teva BD

$conn = new mysqli($host, $user, $pass, $dbname);

// Comprovar la connexió
if ($conn->connect_error) {
    die("Error de connexió: " . $conn->connect_error);
}
?>