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); ?>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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