Yii2 DropDownList Onchange изменить автозаполнение виджет "источник" атрибут?

Я уже пробовал это:коде с Yii2 зависит от автозаполнения виджет

но я не знаю, почему это не работает. вот мой html со скриптом:

<?= $form->field($model, 'lbt_holder_type')->dropDownList(['prompt' => '--- Select Holder Type ---', 'S' => 'Student', 'E' => 'Employee'], 
                    ['onChange' => 'JS: var value = (this.value); 
                                if(value == "S"){$(#libraryborrowtransaction-name).autoComplete({source: '. $s_data.');}
                                if(value == "E"){$(#libraryborrowtransaction-name).autoComplete({source: '. $e_data.');}

                    '])?>

автозаполнение:

<?= $form->field($model, 'name')->widget(yiijuiAutoComplete::classname(), [
                'options' => ['class' => 'form-control', 'placeholder' => 'Enter Name/ID'],
                'clientOptions' => [
                    'source' => $s_data,
                    'autoFill' => true,
                    'minLength' => '1',
                    'select' => new yiiwebJsExpression("function( event, ui ) {
                        $('#libraryborrowtransaction-lbt_holder_id').val(ui.item.id);
                    }")
                ],
            ])?>

Я хочу изменить источник автозаполнения в соответствии со значением dropdownlist, если S затем загрузите $s_data, загрузите $e_data. Любая помощь в этом. Спасибо.

вот мои данные,

$s_data = (new yiidbQuery())
->select(["CONCAT(stu_unique_id,' - ',stu_first_name,' ',stu_last_name) as value","CONCAT(stu_unique_id,' - ',stu_first_name,' ',stu_last_name) as label","s_info.stu_info_stu_master_id as id"])
->from('stu_master stu')
->join('join','stu_info s_info','s_info.stu_info_id = stu_master_stu_info_id')
->where('is_status = 0')
->all();

и

$e_data = (new yiidbQuery())
    ->select(["CONCAT(emp_unique_id, ' - ',emp_first_name,' ',emp_last_name) as value","info.emp_info_emp_master_id as id"])
    ->from('emp_master emp')
    ->join('join', 'emp_info info', 'info.emp_info_id = emp_info_emp_master_id')
    ->where('is_status = 0')        
    ->all();
10
autocomplete jquery node.js php yii2

1 ответов

Ну, я добавил ваши фрагменты кода в мою тестовую среду yii2, чтобы проверить, что не так. Таким образом, есть некоторые проблемы с вашим кодом:

[
   'onChange' => 
       'JS: var value = (this.value); 

       if(value == "S"){$(#libraryborrowtransaction-name).
           autoComplete({source: '. $s_data.');}

       if(value == "E"){$(#libraryborrowtransaction-name).
           autoComplete({source: '. $e_data.');}

']

прежде всего я заметил, что yii применяет некоторые escaping для символов кавычек для ваших "S" и "E", а ваш код в браузере выглядит как &quot;S&quot;.

затем плагин автозаполнения jui добавляет свойство в прототип jQuery с именем "autocomplete" а не "autoComplete". Поскольку js чувствителен к регистру, эти два имени выглядят разных для него.

поэтому моим решением было переместить все js из onchange свойство для разделения сценария js, как показано ниже (для целей тестирования вы можете добавить его прямо в файл Yii view, где вы используете код, указанный в вашем вопросе)

<script>
    function holderTypeChangeHandler(ev) {
        var value = (this.value); 
        if(value == 'S'){
            $('#libraryborrowtransaction-name').autocomplete({source: ' . $s_data . '});
        }
        if(value == 'E'){
            $('#libraryborrowtransaction-name').autocomplete({source: ' . $e_data . '});
        } 
    }
    window.onload = function(){
        $('#libraryborrowtransaction-lbt_holder_type').on('change', holderTypeChangeHandler);

    };
</script>

и вставьте имя этого нового обработчика событий в свойство onchange вашего dropdownList следующим образом:

['onChange' => 'holderTypeChangeHandler']

обновление: ---------------------

поскольку автозаполнение Yii2 основано на JQuery UI автозаполнения виджет и Yii2 автозаполнения clientOptions содержит настройки для виджета автозаполнения JUI, то мы можем обратиться к jui API docs для объяснения source опции. Как вы можете видеть, эта опция может быть строкой (в этом случае она используется как URI для данных JSON), функцией или массивом данных js или массивом объектов js.

в вашем вопросе вы используете \yii\db\Query чтобы получить некоторые данные из БД с помощью способ all(), который возвращает массив данных. Итак, наконец, вам нужно преобразовать массив данных, который вы получаете с \yii\db\Query->all к массиву объектов js. Для этого используйте php функции json, particulary для вашего случая вам нужно использовать json_encode() функция:

// Let's say this is a result of your query to db with use of `\yii\db\Query->...->all();`
$some_array = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    [                                                                                                                                                    
        "value" => "Val 1",                                                                                                                                
        "label" => "Label 1",
        "id" => 1
    ],
    [
        "value" => "Val 2",
        "label" => "Label 2",
        "id" => 2
    ]
]

// Just convert it to json string
$s_data = json_encode($some_array);
...
// When concat this json string as a value of source attribute for Yii Autocomplete
$('#libraryborrowtransaction-name').autocomplete({source: <?= $s_data ?> });

то же самое, если для вашего $e_data. Просто обратите внимание, что вы получаете свои данные из БД с PHP, но используете его с JS, поэтому PHP-массив должен быть преобразован в строковое представление JS-массива объектов, и это преобразование вы можете сделать с json_encode.

8