AJAX pot acceptar més d’una entrada

Modificació de l’AJAX per passar més paràmetres Afegirem bd i taula als dades enviades a PHP.

$(document).ready(function () {
    // Quan el DOM estigui completament carregat, s'executa aquesta funció.
    $("#cercar").on("keyup", function () {
        // Associem un esdeveniment 'keyup' al camp de text amb ID 'cercar'.
        var paraula = $(this).val(); // Obtenim el valor actual del camp de text.
        var bd = "nom_de_la_base_de_dades";  // Nom de la base de dades (pot ser dinàmic).
        var taula = "nom_de_la_taula";      // Nom de la taula (pot ser dinàmic).

        console.log("Tecla premuda: " + paraula); // Mostrem el valor a la consola per depuració.

        if (paraula.length > 0) {
            // Si hi ha text al camp de cerca (longitud major que 0), fem una crida AJAX.
            $.ajax({
                url: "cercar.php", // URL del script del servidor que processarà la sol·licitud.
                type: "POST", // Mètode HTTP utilitzat per enviar les dades.
                data: { 
                    cercar: paraula, // Paraula buscada.
                    bd: bd,          // Nom de la base de dades.
                    taula: taula     // Nom de la taula.
                },
                success: function (resposta) {
                    // Funció que s'executa si la crida AJAX té èxit.
                    console.log("Resposta AJAX rebuda"); // Missatge de depuració.
                    var resultats = JSON.parse(resposta); // Convertim la resposta JSON a un array JavaScript.
                    var htmlResultats = resultats.map(function (item) {
                        // Creem elements HTML (<li>) per a cada resultat.
                        return "<li class='resultat'>" + item + "</li>";
                    }).join(""); // Unim els elements en una cadena HTML.
                    $("#resultats_autocompletar").html(htmlResultats); // Inserim els resultats al contenidor.
                },
                error: function () {
                    // Funció que s'executa si hi ha un error en la crida AJAX.
                    console.error("Error en la crida AJAX."); // Missatge d'error a la consola.
                }
            });
        } else {
            // Si el camp de cerca està buit, esborrem els resultats previs.
            $("#resultats_autocompletar").html("");
        }
    });

    // Afegim un esdeveniment de clic per als elements de la llista de resultats.
    $(document).on("click", ".resultat", function () {
        var paraulaSeleccionada = $(this).text(); // Obtenim el text de l'element clicat.
        console.log("Paraula seleccionada: " + paraulaSeleccionada); // Mostrem el text a la consola.
        $("#cercar").val(paraulaSeleccionada); // Col·loquem el text seleccionat al camp de cerca.
    });
});

cercar.php

<?php
header('Content-Type: application/json'); // Indiquem que la resposta serà en format JSON.
session_start(); // Iniciem la sessió (si és necessari per altres funcions).

if (isset($_POST['cercar'], $_POST['bd'], $_POST['taula'])) {
    // Comprovem que s'hagin rebut tots els paràmetres necessaris.
    $cercar = $_POST['cercar']; // Text introduït per l'usuari.
    $bd = $_POST['bd'];         // Nom de la base de dades.
    $taula = $_POST['taula'];   // Nom de la taula.

    // Conexió a la base de dades (ajusta les credencials segons el teu entorn).
    $conn = new mysqli("localhost", "usuari", "contrasenya", $bd);

    if ($conn->connect_error) {
        // Si hi ha un error de connexió, retornem un missatge d'error en format JSON.
        die(json_encode(["error" => "Error de connexió: " . $conn->connect_error]));
    }

    // Evitem injeccions SQL utilitzant prepared statements.
    $stmt = $conn->prepare("SELECT camp FROM $taula WHERE camp LIKE ?"); // Consulta SQL.
    $cercar = "%$cercar%";  // Cerca parcial (exemple: '%text%').
    $stmt->bind_param("s", $cercar); // Lliguem el paràmetre de cerca.
    $stmt->execute(); // Executem la consulta.
    $result = $stmt->get_result(); // Obtenim el resultat.

    $resultats = []; // Array per emmagatzemar els resultats.
    while ($row = $result->fetch_assoc()) {
        // Recorrem els resultats i afegim cada valor al array.
        $resultats[] = $row['camp'];
    }

    echo json_encode($resultats); // Retornem els resultats en format JSON.

    $stmt->close(); // Tanquem la sentència preparada.
    $conn->close(); // Tanquem la connexió a la base de dades.
} else {
    // Si falten paràmetres, retornem un missatge d'error en format JSON.
    echo json_encode(["error" => "Falten paràmetres"]);
}
?>

Què hem fet?

  1. Passar $cercar, $bd i $taula des d’AJAX a cercar.php.
  2. Utilitzar $bd i $taula a la consulta SQL perquè la cerca sigui més flexible.
  3. Afegir seguretat amb mysqli_prepare per evitar SQL Injection.
  4. Enviar la resposta com JSON, que AJAX pot interpretar fàcilment.