Salut tout le monde voilà j'utilise un petit sytème permettant d'afficher une liste de ville au fur à mesure de la saisie, mon problème est que lordqu'on commence à saisir par exemple 3 lettre la liste est vite longue j'aimerais pouvoir la limiter et faire un scroll pour descendre ou monter éventuellement:

Le code généré en HTML:

<div id="output">
<a href="#">38000 &nbsp; GRENOBLE</a>
<a href="#">38100 &nbsp; GRENOBLE</a>
</div>

Le js permettant cette exécution:

jQuery(function ($) {
    var _code = $('#code'), _city = $('#city'), _out = $('#output');
    var _cache = {};
    var _protocol = ~(location.protocol + '').indexOf('s') ? 'https' : 'http';
    var _host = _protocol + '://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;
    });
});

Le input avec le output de la suggestion:

<input type="text" class=" search-query" id="city"  name="ville" placeholder="Localité ?">

<div id="output"></div

-
Edité par blinz 6 avril 2020 à 11:28:22

Bonjour Blinz

Si je comprends bien au fur et à mesure que tu frappes des lettres la div  output se complète avec les diverses réponses.

Si tel est le cas voir

https://www.developpez.net/forums/d558971/javascript/general-javascript/div-ascenseur-vertical/

qui te permettra de mettre en place un ascenseur sur cette div, reste alors à régler aux dimensions voulues.

mais je n'ai peut-être rien compris?

Cordialement