Yii2 DropDownList Onchange更改自动完成窗口小部件"源"属性？

Question

我已经尝试过这个:yii2依赖自动完成小部件

但我不知道为什么它不起作用.这里我的脚本脚本:

<?= $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(\yii\jui\AutoComplete::classname(), [
                'options' => ['class' => 'form-control', 'placeholder' => 'Enter Name/ID'],
                'clientOptions' => [
                    'source' => $s_data,
                    'autoFill' => true,
                    'minLength' => '1',
                    'select' => new yii\web\JsExpression("function( event, ui ) {
                        $('#libraryborrowtransaction-lbt_holder_id').val(ui.item.id);
                    }")
                ],
            ])?>

我想根据下拉列表值更改自动完成源,如果S然后加载$ s_data,则加载$ e_data.对此有任何帮助.谢谢.

这是我的数据,

$s_data = (new \yii\db\Query())
->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 \yii\db\Query())
    ->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();

Answer 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为你的"S"和"E"应用了一些转义为引号的符号,并且你的浏览器中的代码看起来像"S".

接下来,jui autocomplete插件为jquery原型添加了一个属性,"autocomplete"但名称却没有"autoComplete".至于js是区分大小写的,这两个名字看起来不同.

所以我的解决方案是将所有js从onchange属性移动到单独的js脚本,如下所示(出于测试目的,您可以将其添加到您使用问题中提供的代码的yii视图文件中)

<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>

并将此新事件处理程序的名称粘贴到dropdownList的onchange属性,如下所示:

['onChange' => 'holderTypeChangeHandler']

更新:---------------------

由于基于JQuery UI自动完成小部件和Yii2自动完成的Yii2自动完成clientOptions包含JUI自动完成小部件的设置,因此我们可以参考JUI API文档来解释该source选项.如您所见,此选项可以是一个字符串(在本例中它用作JSON数据的URI),一个函数或一个js数组数组或js对象数组.

在您的问题中,您正在使用方法的\yii\db\Query帮助从db获取一些数据,该方法all()返回一个数据数组.所以最后你需要将你得到的数据数组转换\yii\db\Query->all为js对象数组.要做到这一点,使用php json函数,特别适用于你需要使用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从db获取数据,但是将其与JS一起使用,因此需要将php数组转换为字符串表示js对象数组,并且您可以使用此转换json_encode.