Rendre resultat de recherche cliquable

Bonjour,
Je suis débutant en js/ajax/php et j'ai besoin de faire une liste déroulante avec des adresses mail stockée dans une bdd. J'ai créer un <input> qui va chercher les adresses mail dans la bd et les affiches en temps réel mais maintenant j'aimerai pouvoir cliquer sur ces résultats pour afficher le mail que je veux dans le <input> de recherche.

Voici mon code tableau.php :

php
<div>
        <input type="text" id="search-mail"/>
    </div>
    <div>
        <div id="result-search"></div>
    </div>

    <script>
        $(document).ready(function(){
            $('#search-mail').keyup(function(){
                $('#result-search').html('');
                var mail = $(this).val();

                if(mail != "") {
                    $.ajax({
                        type: 'GET',
                        url: '../fonctions/rechercheMail.php',
                        data: 'mail=' + encodeURIComponent(mail),
                        success: function (data) {
                            if (data != "") {
                                $('#result-search').append(data);
                            } else {
                                document.getElementById('result-search').innerHTML = "<div>Aucun mail</div>";
                            }
                        }
                    })
                }
            })
</script>

Et mon code rechercheMail.php :

<?php
session_start();
include('../php/connexion.php');

if(isset($_GET['mail'])){
    $mail = (String) trim($_GET['mail']);

    $req = $db->prepare("SELECT * FROM personne WHERE mail LIKE ? LIMIT 10");
    $req->execute(array("%$mail%"));
    $req = $req->fetchAll();

    foreach($req as $r){
        ?>
        <div>
            <?= $r['mail']?>
        </div>
        <?php
    }
}

J'espère avoir été assez clair, merci :) (je n'ai pas trouvé comment afficher le code correctement excusez-moi ..)