Cvičení 04 | Webové technologie 3

1. Lokální našeptávač z JavaScriptového pole (20 slov)

Slova jsou definována v klientském poli JS. Našeptávač reaguje okamžitě od 1 zadaného písmene.

Zadejte technologii nebo webový termín: Lokální zdroj (JavaScript pole • minLength: 1).

// 1. Deklarace pole s 20 položkami
const technologie = [
    "JavaScript", "jQuery", "JSON", "Java", "PHP",
    "Python", "PostgreSQL", "HTML5", "CSS3", "C++",
    "C#", "Apache", "Nginx", "Docker", "Debian",
    "TypeScript", "MySQL", "MariaDB", "Git", "WireGuard"
];

// 2. Inicializace jQuery UI Autocomplete
$("#jsAutocomplete").autocomplete({
    source: technologie,
    minLength: 1
});

2. Dynamický našeptávač z databáze přes AJAX a PHP

Dotaz se po každém stisku klávesy asynchronně posílá do search.php, který provede SQL dotaz do tabulky autocomplete_slova.

Zadejte hledaný výraz z databáze: Serverový zdroj (MySQL databáze • AJAX • JSON).

// KLIENT: jQuery AJAX volání pro našeptávač
$("#dbAutocomplete").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "search.php",
            type: "GET",
            dataType: "json",
            data: { term: request.term },
            success: function(data) { response(data); }
        });
    },
    minLength: 1
});

// SERVER (search.php): Prepared Statement v MySQL
$stmt = mysqli_prepare($spojeni, "SELECT slovo FROM autocomplete_slova WHERE slovo LIKE CONCAT(?, '%') LIMIT 10");
mysqli_stmt_bind_param($stmt, "s", $query);
mysqli_stmt_execute($stmt);
$res = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($res)) {
    $results[] = $row['slovo'];
}
echo json_encode($results, JSON_UNESCAPED_UNICODE);