JavaScript实现邮箱后缀提示功能的示例代码

先来个基础的

需求

• 根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能
• 当用户没有任何输入时，提示框消失
• 当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示
• 暂时不用考虑示意图中的红色和蓝色背景色的逻辑
• 注意用户输入中前后空格需要去除

小优化编码

需求

如果我们输入的是 abc@1，这个时候出现的提示框内容是

• abc@1@163.com
• abc@1@gmail.com
• abc@1@126.com
• ……

很明显，上面的提示框不是一个符合用户需求的提示，我们需要做一些优化：

当用户输入含有 @ 符号时，我们选取用户输入的@前面的字符来和后缀拼接

需求

这下出现的提示好多了，不过用户如果已经输入了@1，说明他大概率要输入163或者126，我们需要让我们的提示更加符合用户的期望。满足以下需求：

当用户输入了 @ 及部分后缀时，只从 postfixList 选取符合用户输入预期的后缀，我们以前缀匹配为要求。

当用户输入不满足任何前缀匹配时，则显示全部提示

测试用例

• 输入a@1->出现提示框，提示a@163.com, a@126.com
• 输入a@g->出现提示框，提示a@gmail.com
• 输入a@2->出现提示框，提示a@263.net
• 输入a@qq->出现提示框，提示a@qq.com
• 输入a@163.->出现提示框，提示a@163.com
• 输入a@126.com->出现提示框，提示a@126.com
• 输入a@qq.com （两个空格）->出现提示框，提示a@qq.com
• 输入a@qq.comm->出现提示框，出现全部提示 代码1

新的需求编码

需求

上面我们只完成了提示，但提示还没有直接作用到选择中，我们现在完成以下需求：

• 使用CSS实现：鼠标滑过提示框的某一个提示时，这个提示内容背景色变化，表示鼠标经过了这个DOM节点
• 鼠标如果点击某个提示，则提示内容进入输入框，同时提示框消失
• 在上个步骤结束后，在输入框中任意再输入字符或删除字符，则重新开始出现提示框

需求

尝试在输入框中输入，看看提示框发生了什么