Yii2 DropDownList Onchange更改自动完成窗口小部件“源"属性? [英] Yii2 DropDownList Onchange change Autocomplete Widget "source" attribute?
问题描述
我已经尝试过: yii2依赖的自动完成小部件
但是我不知道为什么它不起作用. 这是我的HTML脚本:
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.');}
'])?>
自动完成:
<?= $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. 任何帮助.谢谢.
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.
这是我的数据，
$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();
推荐答案
好，我已经将您的代码段添加到我的测试yii2环境中，以测试问题所在.因此，您的代码存在一些问题:
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.');}
']
首先，我注意到yii对"S"和"E"的引号符号进行了一些转义，并且您在浏览器中的代码类似于"S".
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".
接下来，jui autocomplete插件将名称为"autocomplete"而不是"autoComplete"的属性添加到jquery原型中.至于js是区分大小写的，这两个名称看起来就不同.
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.
所以我的解决方案是将所有js从onchange属性移到单独的js脚本，如下所示(出于测试目的，您可以将其直接添加到yii视图文件中，在其中使用问题中提供的代码)
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>
将此新事件处理程序的名称粘贴到您的dropdownList的onchange属性中，如下所示:
And paste name of this new event handler to your dropdownList's onchange property like this:
['onChange' => 'holderTypeChangeHandler']
更新:---------------------
因为基于JQuery UI自动完成小部件的Yii2自动完成和Yii2自动完成clientOptions包含
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.
在您的问题中，您正在使用\yii\db\Query在 json函数，尤其是您需要使用的情况json_encode()功能:
In your question you are using \yii\db\Query 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 \yii\db\Query->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 `\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进行此转换.
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.
这篇关于Yii2 DropDownList Onchange更改自动完成窗口小部件“源"属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
