Yii2 DropDownList Onchange 更改自动完成小部件“源"属性?
我已经尝试过这个:yii2 依赖的自动完成小部件
但我不知道为什么它不起作用.这是我的 html 脚本:
field($model, 'lbt_holder_type')->dropDownList(['prompt' => '--- Select Holder Type ---', 'S' => '学生', 'E' => '员工'],['onChange' =>'JS: var value = (this.value);if(value == "S"){$(#libraryborrowtransaction-name).autoComplete({source: '.$s_data.');}if(value == "E"){$(#libraryborrowtransaction-name).autoComplete({source: '.$e_data.');}'])?>自动完成:
field($model, 'name')->widget(yiijuiAutoComplete::classname(), ['选项' =>['类' =>'表单控件', '占位符' =>'输入姓名/ID'],'clientOptions' =>['来源' =>$s_data,'自动填充' =>真的，'minLength' =>'1','选择' =>new yiiwebJsExpression("function( event, ui ) {$('#libraryborrowtransaction-lbt_holder_id').val(ui.item.id);}")],])?>我想根据下拉列表值更改自动完成源，如果 S 则加载 $s_data 否则加载 $e_data.任何帮助.谢谢.
这是我的数据，
$s_data = (new yiidbQuery())->select(["CONCAT(stu_unique_id,'-',stu_first_name,'',stu_last_name) 作为值","CONCAT(stu_unique_id,'-',stu_first_name,'',stu_last_name) 作为标签","s_info.stu_info_stumaster_stumaster作为 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')-> 全部();和，
$e_data = (new yiidbQuery())->select(["CONCAT(emp_unique_id,'-',emp_first_name,'',emp_last_name) 作为值","info.emp_info_emp_master_id 作为 id"])->from('emp_master emp')->join('join', 'emp_info info', 'info.emp_info_id = emp_info_emp_master_id')-> where('is_status = 0')-> 全部();好吧，我已经将您的代码片段添加到我的测试 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 视图文件中，您可以在其中使用提供的代码你的问题)
并将这个新事件处理程序的名称粘贴到您的 dropdownList 的 onchange 属性中，如下所示:
['onChange' =>'holderTypeChangeHandler']更新:--------------------
由于基于 JQuery UI 自动完成小部件和 Yii2 自动完成的 Yii2 自动完成 clientOptions 包含 JUI 自动完成小部件的设置，然后我们可以参考 JUI API 文档来解释 source 选项.如您所见，此选项可以是字符串(在本例中用作 JSON 数据的 URI)、函数或 js 数据数组或 js 对象数组.
在您的问题中，您正在使用 yiidbQuery 在 方法all()，它返回一个数据数组.所以最后你需要将你用 yiidbQuery->all 得到的数据数组转换为 js 对象数组.为此，请使用 php json 函数，特别是对于您需要使用的情况json_encode() 函数:
//假设这是您使用 `yiidbQuery->...->all();` 查询 db 的结果$some_array = [[价值"=>值 1"，标签" =>"标签 1",身份证"=>1],[价值"=>Val 2"，标签" =>标签2"，身份证"=>2]]//只需将其转换为 json 字符串$s_data = json_encode($some_array);...//当连接这个 json 字符串作为 Yii 自动完成的源属性值时$('#libraryborrowtransaction-name').autocomplete({source: <?= $s_data ?> });如果您的 $e_data 也是如此.请注意，您使用 PHP 从 db 获取数据，但使用 JS，因此需要将 php 数组转换为字符串表示的 js 对象数组，而这种转换可以使用 json_encode.
I have already tried this : yii2 dependent autocomplete widget
but i don't know why it's not working. here my html with script:
<?= $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.');}
'])?>
Autocomplete:
<?= $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);
}")
],
])?>
i want to change autocomplete source according to dropdownlist value, if S then load $s_data else load $e_data. Any help with this. Thanks.
Here's my 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();
and,
$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();
解决方案
Well, I've added your code snippets to my test yii2 environment to test what's wrong. So there are some problems with your code:
[
'onChange' =>
'JS: var value = (this.value);
if(value == "S"){$(#libraryborrowtransaction-name).
autoComplete({source: '. $s_data.');}
if(value == "E"){$(#libraryborrowtransaction-name).
autoComplete({source: '. $e_data.');}
']
First of all I noticed what yii apply some escaping for quotation mark symbols for your "S" and "E", and your code in browser looks like "S".
Next, jui autocomplete plugin adds a property to jquery prototype with name "autocomplete" but not "autoComplete". As for as js is case sensitive, this two names looks different for it.
So my solution was to move all js from onchange property to separate js script, as it shown below (for testing purposes you can add it right in your yii view file where you use code provided in your question)
<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>
And paste name of this new event handler to your dropdownList's onchange property like this:
['onChange' => 'holderTypeChangeHandler']
UPDATE: ---------------------
Since Yii2 Autocomplete based on JQuery UI autocomplete widget and Yii2 Autocomplete clientOptions contains settings for JUI autocomplete widget, then we can refer to JUI API docs for explanation of the source option. As you can see, this option can be a string (in this case it used as URI to JSON data), a function or an js array of data or js array of objects.
In your question you are using yiidbQuery to fetch some data from db with help of method all(), which returns an array of data. So finally you need to convert the array of data which you get with yiidbQuery->all to js array of objects. To do it, use php json functions, particulary for your case you need to use json_encode() function:
// Let's say this is a result of your query to db with use of `yiidbQuery->...->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 ?> });
The same if for your $e_data. Just pay attention, your get your data from db with PHP, but use it with JS, so php array needs to be converted to a string presentation js array of objects, and this conversion you can do with json_encode.
相关文章