Taper un code postal puis avoir les autre information a la suite

azizs
PHP Laravel

Bonjour tous le monde,

Voilà, je cherche de l'aide.

Je voudrais en Javascript avoir la posibiliter de taper le code postal puis cela me sort une liste de ville, je clic que un choix et cela remplir un input juste avec le nom de la ville.

Mon exemple fonctionne tres bien mais je n'arrive pas a en faire un lien cliquable qui remplie un input de la ville.

Exemple : 75001
Résulat : PARIS-1ER-ARRONDISSEMENT

<input id="ville" class="field" placeholder="Entrez un code postal" autocomplete="off" >
                                        <ul>
                                          <li data-vicopo="#ville">
                                            <span data-vicopo-ville></span>
                                          </li>
                                        </ul>
    <script src="https://vicopo.selfbuild.fr/api.js"></script>

Merci beaucoup de votre aide.

2 réponses

sren
Réponse acceptée

Bonjour, tu te perds énormément, et ce que tu vas te DDoS toi même.
Premièrement tu dois utiliser onKeyUp comme tu l'as déjà fait, tu dois également, mettre un setTimeOut, 100,200 ms c'est suffisant pour lancer la requete AJAX et éviter de s'auto DDoS.

$("#code").on('keyup', function() {
    var code = $(this).val();
    var request = $.ajax({
        // Ce qui donnera http://..../public/recupCodePostal
        url: "{{URL::to('/recupCodePostal')}}/",
        method: "GET",
        data: {
            code: code
        },
        dataType: "json"
    });

    request.done(function(result) {
        //traitement de ton JSON
    });

    request.fail(function(jqXHR, textStatus) {
        //S'il y a erreur, on ouvre une nouvelle fenêtre indiquant l'erreur produite
        alert("Request failed: " + textStatus);
        var myWindow = window.open("", "MsgWindow", "width=500,height=500");
        myWindow.document.write(jqXHR.responseText);
    });
});

Puis côté laravel, tu utilises
return NomDeTonModel::where('code', $request->input("code"))

azizs
Auteur

Coucou j'ai trouver cela mais je n'arrive pas a juste recuperer la ville sans le code postal.
Voilà le code :

<section id="input">
    <div class="half">
        <input id="code" class="field" placeholder="Code postal" autocomplete="off" autofocus="">
    </div>
    <div class="half">
        <input id="city" class="field" placeholder="Ville" autocomplete="off">
    </div>
</section>
<section id="output"></section>
<script>

jQuery(function ($) {
    var _code = $('#code'), _city = $('#city'), _out = $('#output');
    var _cache = {};
    var _host = (~(location.protocol + '').indexOf('s')
        ? 'https'
        : 'http'
  ) + '://vicopo.selfbuild.fr';
    _code.keyup(function () {
        var _val = $(this).val();
        if(/^[^0-9]/.test(_val)) {
            _code.val('');
            _city.val(_val).focus().trigger('keyup');
        }
    });
    _city.keyup(function () {
        var _val = $(this).val();
        if(/^[0-9]/.test(_val)) {
            _city.val('');
            _code.val(_val).focus().trigger('keyup');
        }
    });
    function _done(_cities) {
        _out.html(_cities.map(function (_data) {
            return '<a href="#">' + _data.code + ' &nbsp; ' + _data.city + '</a>';
        }).join(''));
    }
    $.each(['code', 'city'], function (i, _name) {
        var _input = $('#' + _name).on('keyup', function () {
            var _val = _input.val();
            if(_val.length > 1) {
                _cache[_name] = _cache[_name] || {};
                if(_cache[_name][_val]) {
                    _done(_cache[_name][_val]);
                }
                var _data = {};
                _data[_name] = _val;
                $.getJSON(_host, _data, function (_answear) {
                    _cache[_name][_answear.input] = _answear.cities;
                    if(_input.val() == _answear.input) {
                        _done(_answear.cities);
                    }
                });
            }
        });
    });
    $(document).on('click', '#output a', function (e) {
        var _contents = $(this).text();
        var _space = _contents.indexOf(' ');
        if(~_space) {
            _code.val(_contents.substr(0, _space));
            _city.val(_contents.substr(_space).trim());
            _out.empty();
        }
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
});
</script>

Merci de votre aide,