Script d'auto-complétion de mots

<form class="col-md-4" method="post" action="traitement.php" id="myForm">
    <input type="text" autocomplete="off" class="form-control" name="ville" id="ville">
    <div class="panel panel-default" id="resultat">
    </div>
</form>

//on récupère les champ de saisie et de résultat, ainsi que le formulaire
    var ville = document.getElementById('ville'),
        resultat = document.getElementById('resultat')
        myForm = document.getElementById('myForm');

    //on instancie l'objet qui sert à effectuer requête ajax
    var xhr = new XMLHttpRequest();

    //on rajoute les évènements qu'il faut
    myForm.addEventListener('submit', function(e){
        e.preventDefault();
    }, false);

    ville.addEventListener('keyup', function(e){
        //on vide les précédents résultats de la recherche
        resultat.innerHTML = '';
        resultat.style.display = 'none';

        //Si l'utilisateur tape sur entrée, on efface les résultats de recherche
        if(e.keyCode == 13)
        {
            e.target.nextElementSibling.innerHTML = '';
            e.target.nextElementSibling.style.display = 'none';
        }
        if (xhr.readyState !== xhr.UNSENT) //S'il y a une requête en cours, on l'annule
            xhr.abort();
        console.log(xhr);
        //préparation de la requête
        xhr.open('POST', 'traitement.php');
        //on récupère le formulaire
        var formulaire = document.getElementById('myForm'),
            form = new FormData(formulaire);
        //envoi du formulaire
        xhr.send(form);
    }, false);
//traitement de la réponse
    xhr.addEventListener('loadend', function(){
        if(xhr.status == 200) //si la requête s'est bien déroulée
        {
            //on récupère les résultats
            var results = xhr.responseText.split('|');
            //S'il y a des résultats, alors on construit le bloc de résultats
            if(xhr.responseText != "")
            {
                //on rend visible le bloc des résultats
                resultat.style.display = 'block';
                for (var i = 0, c = results.length; i < c; i++)
                {
                    var div = document.createElement('div');
                    div.classList.add('supposition');
                    div.appendChild(document.createTextNode(results[i]));
                    resultat.appendChild(div);
                }
            }
        }
    }, false);

<div class="supposition"></div>

<?php
//on récupère les noms des villes dans un tableau
$file = file_get_contents('./towns.txt', FILE_USE_INCLUDE_PATH);
$tableau = unserialize($file);

//on récupère la saisie utilisateur
$saisie = $_POST['ville'];

//tableau qui sera retourné et qui contiendra les occurences correspondant à la recherche
$resultat = array();

//on parcourt le tableau pour chercher les éléments correspondant à la recherche
for($i = 0; $i < count($tableau); $i++)
{
    if(stripos($tableau[$i], $saisie)) //on vérifie la présence de la saisie sur chaque valeur, si c'est le cas, on l'ajoute au tableau résultat
        $resultat[] = $tableau[$i];
}
//on trie les résultats par ordre lexico-grammatical croissant
sort($resultat);

//on affiche le résultat sous forme de chaîne formattée
echo implode('|',$resultat);
?>

ville.addEventListener('keyup', function(e){
        //on vide les précédents résultats de la recherche
        resultat.innerHTML = '';
        resultat.style.display = 'none';

        /*Si l'utilisateur tape sur la touche de direction inférieure
        on défile les résultats disponibles vers le bas*/
        if(e.keyCode == 40)
        {
            //Si le premier élément résultat a le focus (ou simulé un hover car j'ai un css adapté quand un élément est survolé)
                //Je retire le focus
                //Je passe le focus à l'élément suivant
            //Sinon 
                //Je donne le focus au premier élément (ou simule le survol)
        }
...

ville.addEventListener('keyup', function(e){
        //on vide les précédents résultats de la recherche
        resultat.innerHTML = '';
        resultat.style.display = 'none';

        /*Si l'utilisateur tape sur la touche de direction inférieure
        on défile les résultats disponibles vers le bas*/
        if(e.keyCode == 40)
        {
            controle(e.target.nextElementSibling, "bas");
        }
function controle(resultat, sens)
    {
        var elementSurvole = false,
            div = 0,
            tableau = resultat.childNodes;

        /*function deplacement(element)
        {

        }*/

        for(var i = 0, c = tableau.length; i < c; i++)
        {
            if(tableau[i].nodeType == 1)
            {
                div = tableau[i];
                if(getComputerStyle(div).color == 'white')
                {
                    elementSurvole = true;
                    break;
                }
            }
        }

        if(elementSurvole)
        {
            if(sens == 'bas')
            {
                if(div.nextElementSibling)
                {
                    div.style.backgroundColor = 'white';
                    div.style.color = 'black';
                    var elementSuivant = div.nextElementSibling;
                    elementSuivant.style.backgroundColor = 'rgb(0,127,255)';
                    elementSuivant.style.color = 'white';
                }
            }
        }
        else
        {
            var premier = resultat.firstElementChild;
            premier.style.backgroundColor = 'rgb(0,127,255)';
            elementSuivant.style.color = 'white';
        }
    }

//on récupère les champ de saisie et de résultat, ainsi que le formulaire
    var ville = document.getElementById('ville'),
        resultat = document.getElementById('resultat')
        myForm = document.getElementById('myForm')
        selectedIndex = -1;

function obtenirDivResultat(resultat)
    {
        var enfants = resultat.childNodes,
            length = resultat.childNodes.length
            divs = [];
            console.log(enfants);
        for(var i = 0; i < length; i++)
        {
            (function(i){
                if(enfants[i].classList.contains("supposition"))
                    divs.push(enfants[i]);
            })(i);
        }
        //console.log(divs);
        return divs;
    }
    ville.addEventListener('keyup', function(e){
        /*Si l'utilisateur tape sur la touche de direction du bas
        on défile les résultats disponibles vers le bas*/
        if(e.keyCode == 40)
        {
            //console.log("touche bas");
            var divs = obtenirDivResultat(resultat);
            if(divs.length > 0 && selectedIndex + 1 < divs.length)
            {
                console.log(selectedIndex);
                if(selectedIndex > - 1) //Si un élément a déjà été selectionné
                    //on retire la classe hover
                    divs[selectedIndex].classList.remove("hover");
                divs[++selectedIndex].classList.add("hover");
            }
        }
...