Yii2 DropDownList Onchange更改自动完成小部件“源”属性？

Question

我已经试过了：yii2 dependent autocomplete widget

但我不知道为什么它不起作用。 这是我的带有脚本的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(\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

好吧，我已将您的代码 sn-ps 添加到我的测试 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 自动完成插件将属性添加到 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>

并将这个新事件处理程序的名称粘贴到您的下拉列表的 onchange 属性中，如下所示：

['onChange' => 'holderTypeChangeHandler']

更新：---------

由于 Yii2 Autocomplete 基于 JQuery UI 自动完成小部件和 Yii2 自动完成 clientOptions 包含 settings for JUI autocomplete widget，那么我们可以参考 JUI API 文档对 source option 的解释。如您所见，此选项可以是字符串（在这种情况下，它用作 JSON 数据的 URI）、函数或 js 数据数组或 js 对象数组。

在您的问题中，您正在使用\yii\db\Query 在method all() 的帮助下从数据库中获取一些数据，这将返回一个数据数组。因此，最后您需要将使用\yii\db\Query->all 获得的数据数组转换为js 对象数组。为此，请使用 php json functions，特别是您需要使用 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进行此转换。