yii2中的自动完成

Posted

技术标签:

【中文标题】yii2中的自动完成【英文标题】:Autocomplete in yii2 【发布时间】:2014-06-06 14:35:40 【问题描述】:

在 Yii2 中,我希望我的输入字段之一在用户开始输入时自动完成。下面是我使用 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 值!知道如何解决这个问题吗?

【问题讨论】:

好问题,看来你做不到 @Alex 谢谢!请查看我更新的问题***.com/questions/23260636/… 【参考方案1】:

我想使用 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);

【讨论】:

【参考方案2】:

这可以在隐藏字段输入的帮助下解决。希望这会对某人有所帮助!

    <?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')?>

【讨论】:

嗨 Dency - 我已经尝试使用自动完成小部件和您的建议。它工作正常,但在更新时该字段显示为空白。我错过了什么吗?【参考方案3】:

自动完成功能只是帮助您在字段中填写所需的值。 如果您需要提交 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

【讨论】:

感谢您的回答。但我想在没有任何扩展的情况下完成它。请查看我更新的问题。***.com/questions/23260636/…

以上是关于yii2中的自动完成的主要内容,如果未能解决你的问题,请参考以下文章

YII2如何将查询结果发送到jquery自动完成?

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

如何仅在多个自动完成文本框中的前 2 个字符之后才开始自动完成?

Yii2的深入学习--自动加载机制(转)

HTML中的代码完成/自动完成Angular / typescript ATOM

bash别名中的Git自动完成?