Ajax keyup - GET

<!doctype html>
    <html lang="nl">
    <head>
        <title>AJAX</title>
        <meta charset="utf-8">
        <meta name="robots" content="noindex, nofollow">
        <style>
            table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse; border-spacing: 0; }
            td, th { border: 1px solid transparent; height: 30px; transition: all 0.3s; }
            th { background: #DFDFDF; font-weight: bold; }
            td { background: #FAFAFA; text-align: center; }
            tr:nth-child(even) td { background: #F1F1F1; }
            tr:nth-child(odd) td { background: #FEFEFE; }
        </style>
    </head>
    <body>
        <input type="text" id="text" name="text" placeholder="Typ hier een plaatsnaam..."><br /><br />
        <div id="el"></div>
        <script>
            document.addEventListener("DOMContentLoaded",
                () => {
                    const xhttp = new XMLHttpRequest();
                    document.getElementById('text').addEventListener("keyup", ajaxfunction);
                    function ajaxfunction() {
                        xhttp.onreadystatechange = function() {
                            document.getElementById('el').innerHTML = '<img src="ajax-loader.gif">';
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById('el').innerHTML = xhttp.responseText;
                            }
                        }
                        xhttp.open("GET", "ajaxtest.php?plaats=" + text.value);
                        xhttp.send();
                    }
                }
            );
        </script>
    </body>
</html>