在Yii2中,我希望我的输入字段之一在用户开始输入时自动完成.Below是我使用Jui Autocomplete
的代码。
<?php
$items= ArrayHelper::map(Company::find()->all(), 'c_id', 'name');
echo AutoComplete::widget([
'model' => $model,
'attribute' => 'company',
'clientOptions' => [
'source' => $items,
],
]);?>
这不起作用。当我打印我的阵列时,我喜欢
Array ( [1] => abc [2] => xyz [4] => pqr )
当我手动设置
时,我得到了它 $items=['abc','xyz','pqr'];
原因可能是我的c_id's
没有订购?但我希望提交c_id
值!有什么想法解决这个问题吗?
答案 0 :(得分:15)
这可以通过隐藏字段输入来解决。希望这会对某人有所帮助!
<?php
use yii\web\JsExpression;
$data = Company::find()
->select(['name as value', 'name as label','c_id as id'])
->asArray()
->all();
echo AutoComplete::widget([
'name' => 'Company',
'id' => 'ddd',
'clientOptions' => [
'source' => $data,
'autoFill'=>true,
'minLength'=>'4',
'select' => new JsExpression("function( event, ui ) {
$('#user-company').val(ui.item.id);
}")
],
]);
?>
<?= Html::activeHiddenInput($model, 'company')?>
答案 1 :(得分:1)
自动填充功能只会帮助您填写所需的值。 如果你需要提交c_id,请查看dropdownList或Select2插件。
检查此http://demos.krajee.com/widget-details/select2 yii2小部件以获取提示。 这里是示例代码:
<?php
use kartik\widgets\Select2;
use app\models\Modelname;
$model = new Modelname;
$data = ['qwe1'=>'color1','key2'=>'color3']
?>
<?= Html::beginForm() ?>
<?= Select2::widget([
'model' => $model,
'attribute' => 'color',
'data' => array_merge(["" => ""], $data),
'options' => ['placeholder' => 'Select a state ...'],
'pluginOptions' => [
'allowClear' => true
],
]); ?>
<?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
<?= Html::endForm() ?>
它还支持加载ajax的数据:http://demos.krajee.com/widget-details/select2#ajax
答案 2 :(得分:0)
我想使用Jui自动完成功能,以便当我单击或关注自动完成功能文本框时,它应该显示选项。
我写了下面的代码,它似乎正常工作
$floorOptionsArray = ['Basement', 'Ground Floor', 'First floor', 'Second floor', 'Third floor'];
// $floorOptionsArray = array_combine($floorOptionsArray, $floorOptionsArray);
$model = new Customer();
echo $form->field($model, 'floor')
->widget(\yii\jui\AutoComplete::classname(), [
'value' => (!empty($model->floor) ? $model->floor : ''),
'clientOptions' => [
'source' => $floorOptionsArray,
'enabled' => true,
'minLength' => 0
],
'options' =>
[
'placeholder' => 'Floor',
'class' => 'form-control autocomplete-input-bg-arrow ',
'onclick' => "(function ( ) {
$( '#customer-floor' ).autocomplete( 'search', '' );
})();",
'onfocus' => "(function ( ) {
$( '#customer-floor' ).autocomplete( 'search', '' );
})();",
],
])->label(true);