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".

Merci d'avance pour votre aide !

5 réponses


Benjamin Derepas
Réponse acceptée
 for(ii in result['places']) {
              var array = result['places'][ii]['place name'];
              suggestions.push(array);
          }

Tu es sur de ta loop là ?

betaWeb
Réponse acceptée

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
Auteur

Oui oui normalement il marche, je l'ai pris d'ici :
http://api.zippopotam.us/static/sample_fr.html

Mais cette variable c'était pour un test donc ça reviens au même non ?

F3LENYR
Auteur

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 !

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