php - Yii2 DropDownList Onchange更改自动完成小部件 "source"属性？

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

好吧，我已将您的代码片段添加到我的测试 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 原型(prototype)添加一个名为 "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 属性中，如下所示:

['onChange' => 'holderTypeChangeHandler']

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

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

在您的问题中，您使用 \yii\db\Query 在 method all() 的帮助下从 db 获取一些数据，它返回一个数据数组。因此，最后您需要将使用 \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 进行此转换.