根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能
当用户没有任何输入时，提示框消失
当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示
暂时不用考虑示意图中的红色和蓝色背景色的逻辑
注意用户输入中前后空格需要去除
小优化编码
需求
如果我们输入的是 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
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>邮箱后缀提示1-完成基本提示</title> </head> <body> <div> <input type="text"> <ul> </ul> </div> <script> var postfixList = ["163.com", "gmail.com", "126.com", "qq.com", "263.net"]; var txt = document.getElementById("input-email"); var sug = document.getElementById("email-sug-wrapper"); // keys.addEventListener("keyup",function(){ // console.log("event handle1"); // }) // keys.addEventListener("keypress",function(){ // console.log("event handle2"); // }) // keys.addEventListener("keydown",function(){ // console.log("event handle3"); // }) // keys.addEventListener("input",function(){ // console.log("event handle4"); // }) //经过查看各个效果，oninput效果最符合需求。 txt.oninput = function () { console.log("event handle4"); judge(); add(); } function getText() { var inputText = txt.value.trim(); return inputText; } //判断是否生成新的数组 function postlist() { var userinput = getText(); var newpostlist = new Array(); if (userinput.search('@') != 0) { var len = userinput.search('@'); //用来拼接的用户输入内容 = 只使用@之后的字符串 var x = userinput.substring(len + 1, userinput.length); //取@之后的部分 for (var i = 0; i < postfixList.length; i++) { if (postfixList[i].search(x) == 0) { newpostlist.push(postfixList[i]); } } //若@后面没有字符或者新数组newpostlist为空，就返回原来的postfixlist if (x === '' || newpostlist == '') { return postfixList; } return newpostlist; } else { return postfixList; } } //根据输入内容和匹配来生成提示数组 function promptContent() { var x = getText(); var tips = new Array(); if (x.indexOf("@") != -1) { var p = x.slice(0, x.indexOf("@")); for (i = 0; i < postlist().length; i++) { tips[i] = p + "@" + postlist()[i]; } } else { for (i = 0; i < postfixList.length; i++) { tips[i] = x + "@" + postfixList[i]; } } return tips; } //添加提示数组进入li function add() { var sug = document.getElementById("email-sug-wrapper"); var tips = promptContent(); while (sug.hasChildNodes()) { sug.removeChild(sug.firstChild); } //将之前的列表清除掉，然后重新生成新的列表 for (i = 0; i < tips.length; i++) { var tip_li = document.createElement("li"); tip_li.innerHTML = tips[i]; sug.appendChild(tip_li); } } function judge() { //判空，是“”没有内容，不能为“ ” if (getText() == "") { hide(); } else { display(); } } function hide() { sug.style.display = "none"; } function display() { sug.style.display = "block"; } </script> </body> </html>
新的需求编码
需求
上面我们只完成了提示，但提示还没有直接作用到选择中，我们现在完成以下需求：
使用CSS实现：鼠标滑过提示框的某一个提示时，这个提示内容背景色变化，表示鼠标经过了这个DOM节点
鼠标如果点击某个提示，则提示内容进入输入框，同时提示框消失
在上个步骤结束后，在输入框中任意再输入字符或删除字符，则重新开始出现提示框
需求
尝试在输入框中输入<b>，看看提示框发生了什么
阅读
设计