Yii2中如何通过ActiveForm实现datalist输入联想选择功能

快速实现（无需封装，开箱即用） #

不需要修改任何组件，直接通过现有ActiveField方法即可实现，代码如下：

// 生成带list属性的文本输入框
<?= $form->field($model, 'browser')->textInput(['list' => 'browser-datalist']) ?>

// 渲染对应id的datalist选项
<datalist id="browser-datalist">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

注意：输入框list属性的值必须和datalist标签的id完全匹配，否则联想功能无法触发。

封装自定义方法，对齐内置dropdownList()调用体验 #

如果需要和调用dropdownList()一样，直接传选项数组完成渲染，不需要每次手动写datalist标签，可以通过扩展ActiveField实现，步骤如下：

1. 新建自定义ActiveField类，路径可放在app/widgets/CustomActiveField.php，代码如下：

   <?php
   namespace app\widgets;
   
   use yii\widgets\ActiveField;
   use yii\helpers\Html;
   
   class CustomActiveField extends ActiveField
   {
       /**
        * 生成datalist联想输入字段
        * @param array $items 联想选项数组，格式：[值 => 显示文本]
        * @param array $options 输入框HTML属性配置
        * @return $this
        */
       public function datalist($items = [], $options = [])
       {
           // 自动生成唯一datalist ID，避免同页面多字段冲突
           $listId = $this->getInputId() . '-datalist';
           $options['list'] = $listId;
   
           // 渲染基础文本输入框
           $this->textInput($options);
   
           // 拼接datalist选项
           $optionStr = '';
           foreach ($items as $value => $label) {
               $optionStr .= Html::tag('option', '', ['value' => $value]);
           }
           // 将datalist挂载到输入框节点后
           $this->parts['{input}'] .= Html::tag('datalist', $optionStr, ['id' => $listId]);
   
           return $this;
       }
   }
   

2. 在ActiveForm初始化时，指定使用上述自定义字段类：

   <?php $form = \yii\widgets\ActiveForm::begin([
       // 其他配置项...
       'fieldClass' => 'app\widgets\CustomActiveField',
   ]); ?>
   

3. 之后即可直接用链式方法调用，写法和内置dropdownList()完全一致：

   <?= $form->field($model, 'browser')->datalist([
       'Internet Explorer' => 'Internet Explorer',
       'Firefox' => 'Firefox',
       'Google Chrome' => 'Google Chrome',
       'Opera' => 'Opera',
       'Safari' => 'Safari',
   ]) ?>
   

补充说明 #

• 该方案完全基于原生HTML特性实现，无需引入额外JavaScript依赖，兼容所有现代浏览器
• 字段的表单验证、编辑时值自动回填逻辑和普通文本输入框完全一致，同时支持用户输入选项列表外的自定义值

内容的提问来源于stack exchange，提问作者Mohammed H. S.