Element UI autocomplete带输入建议 自动补全后缀（邮箱地址）

最新推荐文章于 2024-07-19 14:26:17 发布
最新推荐文章于 2024-07-19 14:26:17 发布
阅读量3.3k 收藏 4
点赞数 1
分类专栏： Vue 文章标签： 前端 Vue Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44739881/article/details/100982253
版权
本文介绍了如何使用Element UI的autocomplete组件实现带输入建议的邮箱自动补全功能。通过自定义fetch-suggestions方法，实现了在用户输入时动态提供邮箱后缀的建议，并展示了实际效果。
摘要由CSDN通过智能技术生成
Element UI autocomplete带输入建议 自动补全后缀（邮箱地址）

官网介绍

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

这个组件会带着建议，这里我读了读代码，把它改成自动补全后缀邮箱的，效果如下
在这里插入图片描述
按着官网给出的复制，然后把两个事件改成我下面的

   <el-autocomplete :fetch-suggestions="querySearch" :trigger-on-focus
最低0.47元/天 解锁文章
赫奇。
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
详解jQuery UI库中文本输入自动补全功能的用法
10-22
jQuery UI的autocomplete组件能够极大地提升用户的文本输入体验，特别是在输入邮箱地址时，可以通过后缀的自动补全来减少用户输入的工作量。通过调用autocomplete()方法，开发者可以轻松为文本输入框添加自动补全的...
autocomplete实现简单的自动补全
08-28
在IT行业中，自动补全（Autocomplete）是一种常见的用户体验优化技术，它被广泛应用于各种输入框，如搜索引擎、文本编辑器、编程IDE等。自动补全功能能够根据用户输入的部分内容，实时预测并显示可能的完整词汇或...
点击输入文本框时自动提示邮箱后缀（vue项目）
痴心的萝卜的博客
10-05 4638
点击输入邮箱有提示（vue项目） <el-input v-model="inputEmail" placeholder="请输入邮箱账号" clearable prefix-icon="el-icon-user"></el-input> <div class="hintBox"> <div @...
vue element-ui elementUi 邮箱自动补全 邮箱自动填充
祖先生的博客
09-03 2293
<el-autocomplete v-model="form.user.email" :fetch-suggestions="querySearchEmail" :trigger-on-focus="false" placeholder="接收邮件邮箱" > </el-autocomplete> // 邮箱自动填充后缀名 querySearchEmail(queryString, callback) { const emailList = .
Vue结合element UI组件 el-autocomplete 使用 ，解决根据选择类型来决定输入建议的数据延迟问题
最新发布
yuxuan89814的专栏
07-19 502
element UI组件 el-autocomplete 应用 ，解决根据选择类型来决定输入建议的数据延迟问题
vue+js input文本框输入时自动填充邮箱后缀组件封装
qq_43862878的博客
12-20 2090
vue+js input文本框输入时自动填充邮箱后缀组件封装
html5 邮箱后缀自动填写,Ant Design Vue AutoComplete 通过自定义选项search实现如自动补充邮箱后缀功能...
weixin_32327615的博客
06-03 941
Ant Design Vue AutoComplete 通过自定义选项search实现如自动补充邮箱后缀功能node.js webpack开发方式{{email}}export default {data() {return {result: [],};},methods: {search(value) {let result;if (!value || value.indexOf('@') &g...
Element UI 表单验证-手机号+密码格式+邮箱 输入验证
qq_44606649的博客
08-30 2735
<el-form-item label="电话:" prop="phone"> <el-input id="phone" v-model="form.phone" placeholder="123" οninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"> </el-input> </
Element UI el-input 标签限制输入框内容（中文，英文，邮箱，手机号）
热门推荐
qq_45845523的博客
04-06 1万+
设置限制只能输入中文 校验中文的正则：/^[\u4e00-\u9fa5]+$/ rules: { title: [ { required: true, message: "请输入中文名", trigger: "blur" }, { validator: function(rule, value, callback) { if (/^[\u4e00-\u9fa5]+$/.test(value) == f
autoComplete 自动补全 支持中文补全 中间字查询
01-19
在IT领域，自动补全（AutoComplete）是一种常见的功能，广泛应用于搜索引擎、文本编辑器、编程IDE等场景，极大地提高了用户输入效率。本篇将详细探讨`autoComplete`功能，特别是支持中文补全和中间字查询的技术实现...
最简便的可输入的下拉框（带自动补全）
05-02
"最简便的可输入的下拉框（带自动补全）"是一个针对这个需求的解决方案，它允许用户在下拉框中输入文字，并提供自动补全功能，提高了用户输入数据的效率和准确性。这种功能常见于搜索框、地址选择器或者选项过滤等...
vue-email-autocomplete:一个可配置的轻量级Vue包装器组件，可对输入元素进行“开箱即用”的电子邮件自动完成建议
05-27
Vue电子邮件自动完成 一个可配置的轻量级Vue包装器组件，可对输入元素进行“开箱即用”的电子邮件自动完成/建议。 :check_mark_button: 包装器组件，因此您可以与其他启用了表单的库（例如Buefy）一起使用。 :check_mark_button: 可定制的。 :check_mark_button: 只需使用“上/下”键，用户就可以轻松浏览建议列表。 :check_mark_button: 用户还可以通过在选择时按“输入”键，以所需的值自动填充输入。 安装 # yarn yarn add vue-email-autocomplete # npm npm install vue-email-autocomplete --save 基本用法 < template> < email xss=removed xss=removed> < input type =
邮箱地址自动补全插件
03-21
邮箱地址自动补全插件,输入对应的内容时候提示出主流的邮箱后缀，可供用户选择对应的邮箱、
邮箱自动补全
01-18
邮箱自动补全,纯手工代码实现,依托jQuery,兼容IE67!可添加自定义样式功能
autocomplete邮箱自动补全+上下翻动
09-30
邮箱自动补全 + 上下翻动 当在输入框内输入 @ 时，自动显示各个邮箱的下拉列表。詳情 请看readme.txt
Android学习系列之控件 AutoCompleteTextView邮箱后缀自动补全
Briup-z.changhai
02-23 926
图： 由于原有的AutoCompleteTextView只是按照相同的字符串匹配，所以这里要自定义AutoCompleteTextView，然后复写里面的一些方法 [java] view plain copy  print? public class EmailAutoCompleteTextView extends AutoComplete
element实现form表单动态添加email效果
weixin_44727080的博客
04-20 1725
前言： vue中使用element实现form表单动态添加email效果 效果: 实现步骤： 实现源代码： <template> <div> <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item ...
vue + element UI 如何实现邮箱验证并注册用户
iglvfy的博客
11-13 8101
学习内容： vue + element 实现邮箱验证并注册用户 接下来需要把邮箱输入框内的数据和验证码输入框内的数据绑定到data内，并绑定时间函数： <el-form ref="form" :model="form" label-width="60px" size="mini"> <el-form-item label="邮箱" class="em"> <el-input v-model="form.email"></el-i
element ui自动补全
09-02
- *3* [Element UI autocomplete带输入建议 自动补全后缀（邮箱地址）](https://blog.csdn.net/weixin_44739881/article/details/100982253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值