Autocomplete AJAX avec Materialize

Par F3LENYR, il y a 8 ans

Javascript

Bonjour,

Je suis en ce moment en train de créer un formulaire mais j'ai un petit problème, j'utilise le framework Materialize donc il y'a rien à dire il est très bien, mais il y'a quand même quelques chose à revoir au niveau du système d'autocomplétion, c'est d'aileurs pourquoi je poste ici, en effet, j'ai un problème avec ce module qui est sympa de base, mais dès qu'on essaye de compliquer le système, c'est pas très simple, je vous explique pourquoi.

Ce que je fais

Je souhaiterais afficher un formulaire ou quand l'on rentre le code postal, il indique en autocomplete directement la ville.

Mon formulaire :

<form action="#" method="post" class="form fancy-form"> <fieldset> <legend>Adresses françaises <i style='font-size:12px;'>(French Address)</i></legend> <br/> <div> <div id="zipbox" class="control-group"> <label for="zip">Code Postal</label> <input type="text" class='' pattern="[0-9]*" name="zip" id="zip" placeholder="Tapez votre code postal"/> </div> </div> <div> <div id="citybox" class="control-group"> <label for="city">Ville</label> <input type="text" name="city" id="city" placeholder="D'abord taper votre code postal" /> </div> </div> <div> <a href="http://api.zippopotam.us/static/sample_fr.html" class='btn btn-success btn-large' >Envoi</a> </div> </fieldset> </form>

Mon script JS (sur la même page) :

$(function() { $(document).ready( function() { $('#city').attr('disabled','disabled'); }); $('#city').focus( function() { $(this).autocomplete( "search", "" ); }); $("#zip").keyup(function() { var zip_in = $(this); var zip_box = $('#zipbox'); if (zip_in.val().length < 5) { zip_box.removeClass('error success'); } else if(zip_in.val().length > 5) { zip_box.addClass('error').removeClass('success'); } else if(zip_in.val().length == 5) { $.ajax({ url: "http://api.zippopotam.us/fr/" + zip_in.val(), cache: false, dataType: "json", type: "GET", success: function(result, success) { $('#city').removeAttr('disabled'); // Cette ligne marche // suggestions = {"Test": null, "Test2": null}; var suggestions = []; for(ii in result['places']) { var array = result['places'][ii]['place name']; suggestions.push(array); } console.log(suggestions); $("#city").autocomplete({ data: suggestions, minLength: 0 }); if ( suggestions.length > 0){ $('#city').placeholder = suggestions[0]; } zip_box.addClass('success').removeClass('error'); }, error: function(result, success) { zip_box.removeClass('success').addClass('error'); } }); } }); });

Ce que je veux

Je voudrais que l'on puisse avoir l'autocomplete de Materialize via AJAX.

Ce que j'obtiens

J'obtiens bien une liste avec mes items, mais au mauvais format, par exemple sur la 1ère ligne il devrai y avoir écrit le nom d'une ville au lieu de "0".

Capture

Merci d'avance pour votre aide !

5 réponses

Benjamin Derepas, il y a 8 ans
for(ii in result['places']) { var array = result['places'][ii]['place name']; suggestions.push(array); }

Tu es sur de ta loop là ?

betaWeb, il y a 8 ans

Salut,

Je pense que @Benjamin Derepas a mis le doigt sur l'erreur. De plus, il ne faut pas copier/coller bêtement un code, il te faut également le comprendre.
En l'occurrence, la propriété 'places' de l'objet 'result' est un tableau d'objets. Un simple map suffit pour ce cas là.
Je pense que ceci devrait mieux fonctionner :

var places = result['places']; if (!places || !places.length) return; var suggestions = places.map(function (item) { return item['place name']; });
F3LENYR, il y a 8 ans

Bonjour,

Merci beaucoup de votre aide et des vos conseils @Benjamin Derepas et @betaWeb ça marche parfaitement !

Pour ceux qui veulent la solution :

$(function() { $(document).ready( function() { $('#city').attr('disabled','disabled'); }); $('#city').focus( function() { $(this).autocomplete( "search", "" ); }); $("#zip").keyup(function() { var zip_in = $(this); var zip_box = $('#zipbox'); if(zip_in.val().length < 5) { zip_box.removeClass('error success'); } else if(zip_in.val().length > 5) { zip_box.addClass('error').removeClass('success'); } else if(zip_in.val().length === 5) { $.ajax({ url: "http://api.zippopotam.us/fr/" + zip_in.val(), cache: false, dataType: "json", type: "GET", success: function(result, success) { $('#city').removeAttr('disabled'); // Partie modifiée var places = result['places']; if (!places || !places.length) return; var suggestions = places.map(function (item) { return "\"" + item['place name'] + "\": null"; }); suggestions = "{" + suggestions + "}"; console.log(JSON.parse(suggestions)); $("#city").autocomplete({ // On convertit en JSON sinon la syntaxe n'est pas reconnue data: JSON.parse(suggestions), minLength: 0 }); if (suggestions.length > 0){ $('#city').placeholder = suggestions[0]; } zip_box.addClass('success').removeClass('error'); }, error: function(result, success) { zip_box.removeClass('success').addClass('error'); } }); } }); });

Merci encore !

betaWeb, il y a 8 ans

Pas de quoi :)
Pense à passer ton sujet en résolu ;)