Как реализовать input c выбором города с подгрузкой информации?

Question

[Corepro]

Как реализовать input с выбором города, чтобы автоматически подгружался город при вводе как на примере:
https://astromix.net/uk/ascendant/

Answer 1

[PavelDAS]

На том сайте реализовано через jquery + select2
На бэк отдаём строку поиска,
На бэке сделать отдачу городов (обычно в json),
На фронте заполняешь пседоселект полученными результатами.
На фронте сайта сделано так:

function initAutocomplete(form) {
    if (form.find('#autocomplete').val() != '') {
        form.find("#location").data('placeholder', form.find('#autocomplete').val());
    }

    form.find("#location").select2({
        ajax: {
            delay: 750,
            url: 'https://__тут_адрес_сайта__/ajax/location',
            dataType: 'json',
            crossDomain: true,
            data: function (params) {
                var aida = $('#ak').val();
                var query = {
                    aida: aida,
                    q: params.term,
                };
                return query;
            }
        },
        width: "100%",
        minimumInputLength: 3,
        language: 'ru',
    }).on("select2:open", function (e) {
        event.preventDefault();
        $('.select2-search__field').trigger('focus');
    }).on('select2:select', function (e) {
        var data = e.params.data;
        $('#row_location').removeClass('error');
        $('.select2-selection__rendered').addClass('choosen');
        form.find('#lat').val('');
        form.find('#lng').val('');
        form.find('#locality').val('');
        form.find('#administrative').val('');
        form.find('#country').val('');
        form.find('#autocomplete').val(data.text);

        $.ajax({
            url: 'https://__тут_адрес_сайта__/ajax/locationselect',
            method: 'post',
            data: 'id=' + data.id,
            success: function (data) {
                if (data.status == 'OK') {
                    form.find('#lat').val(data.lat);
                    form.find('#lng').val(data.lng);
                    form.find('#locality').val(data.locality);
                    form.find('#administrative').val(data.administrative);
                    form.find('#country').val(data.country);
                }
            }
        });
    });
}