Auto Complétion en Ajax - Manipuler le DOM

Par Alexis Gatuingt, il y a 7 ans

Javascript

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 :

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

4 réponses

YiuJia, il y a 7 ans

Remplaces déjà ton "keydown" par "keyup" car sinon cela fait par exemple :
Quand j'appuies sur la touche a (touche pas encore relachée), il envoie une requête avec le contenu de la recherche qui est vide à ce moment.
Ensuite tu appuies sur la touche l, il envoie une requête avec le contenu de la recherche qui est "a" à ce moment.

Alexis Gatuingt, il y a 7 ans

Salut merci pour ta rapidité, bien vue, j'ai bien la bonne lettre , mais pareil les elements ne s'échappe pas au fur et mesure

Lartak, il y a 7 ans

Bonsoir.

les elements ne s'échappe pas au fur et mesure

Si tu veux dire que le listing ne se vide pas entre chaque requête dans la div, il te suffit par exemple de le vider avant de boucler sur les enregistrements que tu reçois, exemple :

reponseBloc.classList.add('response-city-class') if (reponse.length) { reponseBloc.innerHTML = "" } 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) }
Alexis Gatuingt, il y a 7 ans

Hello,

Merci pour ta réponse, c'est tout à fait ça . Du coup merci à vous deux vous avez répondu a mes deux problèmes