Auto Complétion en Ajax - Manipuler le DOM

Bonjour,

Je souhaite faire une requête en ajax pour auto complété le champs "ville" . J'ai dans ma base la table ville et j'arrive bien a récupéré les informations. Mais après je coince pour manipulé le dom et afficher les résultats en fonction de la saisie .

Côté serveur j'utilise Laravel
Mon controller :

class AjaxController extends Controller
{
    public function city($name) { 
        return Ville::where('ville_nom_simple','like', $name.'%')->orWhere('ville_nom_reel','like', $name.'%')->get();
    }
}

Ma route :

Route::get('city/{name}', 'AjaxController@city');

Mon code JS :

// Configuration
var getHttpRequest = function () {
    var httpRequest = false;

    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
        return false;
    }

    return httpRequest
}

var getValue = function(p) { 
    p.addEventListener('click', function() { 
        var btn = document.getElementById('input-city')
        btn.value = p.innerText

    })

}

var ajaxComplete = function() { 
    var btn = document.getElementById('input-city');
    btn.addEventListener('keydown', function(e) 
    {
        var self = this;
        var httpRequest = getHttpRequest()
        // 0 - 4 statement
        httpRequest.onreadystatechange = function()
        {

            if(httpRequest.status !== 404) 
            { 
                if(httpRequest.readyState === 4)
                {   
                    var reponse = JSON.parse(httpRequest.response)
                    var reponseBloc = document.querySelector('#response-city')
                    reponseBloc.classList.add('response-city-class')
                    for(var i=0; i<reponse.length; i++) 
                    { 
                        var p = document.createElement('p')
                        var text = document.createTextNode(reponse[i].ville_nom_reel)
                        p.appendChild(text)
                        reponseBloc.appendChild(p)
                        getValue(p)
                    }

                }

            }

        }
        //this prend l'object link et recupere l'url href
        httpRequest.open('GET', '/city/' + btn.value, true)
        httpRequest.send()
    })

}
ajaxComplete()

Le HTML :

        <label>Ville *</label>
        <input required name="ville" style="width: 93%;" id='input-city' value="{{ old('ville')}}" type="ville">
      <div id='response-city'>

        </div>

Je pense pas que ce soit la bonne méthode, parce que déjà je rencontre plusieurs problème :

• J'utilise la valeur du btn pour appelé mon URL mais me retourne 404 lors de la 1er et 2eme saisie avec l'event keyup ou keydown
• Et enfin j'ajoute les elements mais ne les supprime pas . La recherche ne s'affine pas, j'en ajoute seulement et si l'utilisateur change sa saisie et écris B au lieux de A , et bien j'aurai les champs A et B .

Pour testé :
www.mesferias.fr
Il faut se connecté, et c'est le champs "ville" dans "galerie"
Id : test@test.test
pass : test0123

Merci d'avance pour votre temps et bonne soirée