在vue+element 中使用 autocomplete=on，实现自动补全

最新推荐文章于 2025-09-02 17:18:21 发布

原创最新推荐文章于 2025-09-02 17:18:21 发布 · 1w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue #autocomplete #自动补全 #input提示

web前端同时被 2 个专栏收录

18 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文详细介绍了在Vue结合Element UI框架下如何正确使用autocomplete属性，实现输入字段的自动完成功能。关键在于使用form的submit事件并设置input元素的name属性，同时确保element-ui的autocomplete处于开启状态。

autocomplete 属性规定输入字段是否应该启用自动完成功能。（效果示例：https://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete）

在vue+element中使用autocomplete要注意以下几点：

1、一定要用form的submit提交事件，才能使浏览器记住input里的值

2、<input/>一定要写name属性

3、element-ui默认是将autocomplete禁用的，打开的写法为：auto-complete="on"

具体代码如下：

    <!--stop的iframe阻止submit后跳转-->
    <iframe name="stop" class="none"></iframe>
    <!--stop的iframe阻止submit后跳转 end-->

    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
             action="http://"
             target="stop">
      <el-row>
        <el-col :span="23">
          <el-form-item label="姓名" :prop="username">
            <el-input v-model="ruleForm.username"
                      auto-complete="on"
                      name="username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23" class="tr">
          <el-form-item class="no_m">
            <el-button :loading="loading" type="primary" @click="submitForm">
                提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

     submitForm() {
        // 一定要使用form的submit方法，才能记住input的输入值，auto-complete="on"才生效
        this.$refs['ruleForm'].$el.submit();
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            alert('success')
          } else {
            return false;
          }
        })
      }

注：需要用到from本身的submit方法，所以给from定义action，写http://不会跳转到具体页面。而target是为了提交后不跳到其他的页面。