Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Ma page test</title>
    <meta name="title" content="Ma super page" />
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
    <style>
        body {
            background-color: #21d6ff;
        }
        .container {
            margin-top: 5px;
            border-radius: 3px;
            background-color: white;
            min-height: 800px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .title {
            text-align: center;
            color: dodgerblue;
        }
        .form-code {
            margin-top: 50px;
            width: 400px;

        }
        .ville {
            margin-top: 5px;
            border: 1px solid lightgray;
            border-radius: 3px;
        }

        .link {
            margin-top: 10px;
            display: none;
        }
    </style>
    <script>
        let divResult;
        let divLink;
        let result;
        $(document).ready(() => {
            divResult = document.getElementById('result');
            divLink = document.getElementById('link');
        });
        function getCommunes(event) {
            $.get('https://geo.api.gouv.fr/communes', {nom: event.target.value}, value => {
                result = value;
                divResult.innerHTML = '';
                getResult();
            });
        }
        function getResult() {
            for (value of result.splice(0, 5)) {
                divResult.innerHTML += `<div class="ville">
                    Nom: ${value.nom}
                    Code Postal: ${value.codesPostaux.join(' ')}
                    Departement: ${value.codeDepartement}
                    Population: ${value.population}
                    </div>`;
            }
            if (result.length > 0) {
                divLink.style.display = 'block'
            } else {
                divLink.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div class="container col-lg-5">
        <div class="title">
            <h2>Rechercher une ville</h2>
        </div>

        <div class="form-code">
            <div class="form-group">
                <label for="code">Entrez une ville:</label>
                <input type="text" name="code" class="form-control" id="code" onkeyup="getCommunes(event)" />
            </div>
        </div>

        <div class="result" id="result"></div>
        <div class="link" id="link">
            <a href="#" onclick="getResult()">Plus de resultats</a>
        </div>
    </div>
</body>
</html>