1

Добрый вечер! Передо мной встала такая проблема: есть поля в view:

<?= $globalSearchForm->field($model, 'countryId')->dropDownList($model->getCountriesList()); ?>
<?= $globalSearchForm->field($model, 'cityLabel') ?>

Второму полю Yii2 автоматически сгенерировал id: #globalsearchform-citylabel

Мне нужно повесить на это поле autocomplete с довольно сложной механикой: после того, как пользователь выбрал страну (countryId dropdown) и начал вводить название города, аяксом пулять запрос, передавая countryId и то, что ввел пользователь в globalsearchform-citylabel на скрипт. Скрипт через ВК вытащит города по заданному запросу и вернет их, а пользователь увидит под полем ввода искомые города, а в скрытое поле улетит id этого города. Ну, решил я это делать через JS (знаю, что есть спец виджет, но у меня тут все сложнее). Заранее скажу, что скрипт, который вы видите ниже - работал у меня в одном web сервисе, когда о yii2 я и не знал.

$(document).ready(function () {

    var countryId;

    $('#globalsearchform-citylabel').attr('placeholder', 'Выберите страну');
    $('#globalsearchform-citylabel').attr('disabled', true);

    $('#globalsearchform-countryid').change(function () {
        countryId = $(this).val();

        if (countryId == 0) {
            $('#globalsearchform-citylabel').attr('placeholder', 'Выберите страну');
            $('#globalsearchform-citylabel').attr('disabled', true);
            return(false);
        }

        $('#globalsearchform-citylabel').val('');
        $('#globalsearchform-citylabel').attr('placeholder', 'Введите название города');
        $('#globalsearchform-citylabel').attr('disabled', false);
    });

    $('#globalsearchform-citylabel').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/app/print-cities-json",
                dataType: "json",
                data: {
                    "country-id": countryId,
                    q: request.term
                },
                success: function(data) {
                    response($.map(data.cities, function (rt) {
                        return {
                            label: rt.title,
                            value: rt.id
                        };
                    }));
                },
                error: function () {
                    response([]);
                }
            });
        },
        select: function (event, ui) {
            this.value = ui.item.label;

            $('#globalsearchform-cityid').val(ui.item.value);
            event.preventDefault();
        }
    });
});

Отклик на автокомплит есть, но! Уходит он не на URL указанный в скрипте (/app/print-cities-json) с нужными параметрами, а на search-form?query=Ул. Т.е. что мы имеем: 1) скрипт полностью проигнорировал url, на который нужно стучаться. 2) скрипт вообще забил на то, какие я параметры хочу передать на этот url и откуда-то взял свой query параметр (в коде его нет). Шо такое?

1 ответ 1

2

Я сделаль. И так, js скрипт выглядит теперь так:

var countryId;
$(document).ready(function () {

    $('#globalsearchform-citylabel').attr('placeholder', 'Выберите страну');
    $('#globalsearchform-citylabel').attr('disabled', true);

    $('#globalsearchform-countryid').change(function () {
        countryId = $(this).val();

        if (countryId == 0) {
            $('#globalsearchform-citylabel').attr('placeholder', 'Выберите страну');
            $('#globalsearchform-citylabel').attr('disabled', true);
            return(false);
        }

        $('#globalsearchform-citylabel').val('');
        $('#globalsearchform-citylabel').attr('placeholder', 'Введите название города');
        $('#globalsearchform-citylabel').attr('disabled', false);
    });
});

Оказывается переменную countryId можно будет увидеть в view для формы.

А вот так выглядит поле. Вернул виджет, так что все по канонам (наверное).

<?= $globalSearchForm->field($model, 'cityLabel')->widget(\yii\jui\AutoComplete::className(), [
        'clientOptions' => [
            'source' => new JsExpression('
                function (request, response) {
                    $.ajax({
                        url: "/app/print-cities-json",
                        data: {
                            "country_id": countryId,
                            q: request.term
                        },
                        dataType: "json",
                        success: function(data) {
                            response($.map(data.cities, function (rt) {
                                return {
                                    label: rt.title,
                                    value: rt.id
                                };
                            }));
                        },
                        error: function () {
                            response([]);
                        }
                    });
                }
            '),
            'select' => new JsExpression('
                function (event, ui) {
                    this.value = ui.item.label;

                    $("#globalsearchform-cityid").val(ui.item.value);
                    event.preventDefault();
                }
            '),
        ],
        'options' => [
            'class' => 'form-control'
        ]
    ]) ?>
    <?= $globalSearchForm->field($model, 'cityId')->hiddenInput(['value'=> ''])->label(false); ?>

Все работает как часы.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.