task1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.email-sug {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 150px;
height: 22px;
line-height: 22px;
font-size: 14px;
}
li:hover {
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="wrapper">
<input id="email-input" type="text">
<ul id="email-sug-wrapper" class="email-sug"></ul>
</div>
<script>
var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
var input = document.getElementById("email-input");
var ul = document.getElementById("email-sug-wrapper");
input.oninput = function () {
getInput();
addPrompt();
displayOrHide();
};
ul.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toUpperCase() == 'LI') {
input.value = target.innerText;
hide();
}
}
function getInput() {
//拿到input输入框的输入内容trim后返回
var input1 = input.value;
return input1.trim();
}
//生成提示框中的提示内容
function setPrompt() {
var input1 = getInput();
var input2, input3;
var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
if (input1.indexOf("@") == -1) {
input2 = input1;
} else {
input2 = input1.slice(0, input1.indexOf("@"));
input3 = input1.slice(input1.indexOf("@") + 1);
console.log(input3)
}
var res = new Array();
for (var i = 0; i < postfixList.length; i++) {
if (postfixList[i].indexOf(input3) == 0) {
res[i] = input2 + '@' + postfixList[i];
flag = 1;
console.log(res)
}
}
if (flag == 0) {
for (var i = 0; i < postfixList.length; i++) {
res[i] = input2 + '@' + postfixList[i];
}
}
//去除res数组中的空值
for (var i = 0; i < res.length; i++) {
if (typeof res[i] == "undefined" || res[i] == "") {
res.splice(i, 1);
i--;
}
}
return res;
}
function addPrompt() {
var prompt = setPrompt();
var len = ul.childNodes.length;
//removechild()正常的删除全部节点,应该从后面往前删除。
//原因是当你把索引为0的子节点删除后,那么原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点。
for (var i = len - 1; i >= 0; i--) {
ul.removeChild(ul.childNodes[i]);
}
for (var i = 0; i < prompt.length; i++) {
var li = document.createElement('li');
li.innerHTML = prompt[i];
ul.appendChild(li);
}
}
function displayOrHide() {
var input1 = getInput();
if (input1 == "") {
hide();
} else {
display();
}
}
function hide() {
ul.style.display = "none";
}
function display() {
ul.style.display = "block";
}
</script>
</body>
</html>
task2(加上键盘——基于DOM的思路)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.email-sug {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 150px;
height: 22px;
line-height: 22px;
font-size: 14px;
}
li:hover {
background-color: antiquewhite;
}
.selected {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="wrapper">
<input id="email-input" type="text">
<ul id="email-sug-wrapper" class="email-sug"></ul>
</div>
<script>
var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
var input = document.getElementById("email-input");
var ul = document.getElementById("email-sug-wrapper");
var selected = 0;
var selectedLi = null;
input.onkeyup = function (event) {
var event = event || window.event;
addPrompt();
displayOrHide();
if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
resetState();
}
var list = ul.querySelectorAll('li');
if (selectedLi == null) {
selectedLi = ul.querySelector('li:first-child');
selectedLi.classList.add('selected');
}
for (var i = 0; i < list.length; i++) {
if (list[i].getAttribute("class") == 'selected') {
selected = i;
selectedLi = list[i];
}
}
// 按的是上键
if (event.keyCode == 38) {
// 找到的Li不是第一个
selectedLi.classList.remove('selected');
if (selected != 0) {
// 将它的前一个Li设为选中
selectedLi = list[--selected];
selectedLi.classList.add('selected');
} else {
// 将最后一个Li设为选中
selectedLi = list[list.length - 1];
selectedLi.classList.add('selected');
selected = list.length - 1;
}
}
// 按的是下键
if (event.keyCode == 40) {
selectedLi.classList.remove('selected');
// 找到的Li不是最后一个
if (selected != list.length - 1) {
// 将它的下一个Li设为选中
selectedLi = list[++selected];
selectedLi.classList.add('selected');
} else {
// 将第一个Li设为选中
selectedLi = list[0];
selectedLi.classList.add('selected');
selected = 0;
}
}
// 按的是回车
if (event.keyCode === 13) {
// 将找到的Li的HTML内容解码后填到input中
// 隐藏提示框
input.value = selectedLi.textContent;
hide();
}
};
ul.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toUpperCase() == 'LI') {
input.value = target.innerText;
hide();
}
}
function resetState() {
var firstLi = ul.querySelector('li:first-child');
var selectedLi = ul.querySelector('li.selected');
if (selectedLi != null) {
if (firstLi != selectedLi) {
selectedLi.classList.remove('selected');
firstLi.classList.add('selected');
}
} else {
firstLi.classList.add('selected');
}
}
function getInput() {
//拿到input输入框的输入内容trim后返回
var input1 = input.value;
return input1.trim();
}
//生成提示框中的提示内容
function setPrompt() {
var input1 = getInput();
var input2, input3;
var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
if (input1.indexOf("@") == -1) {
input2 = input1;
} else {
input2 = input1.slice(0, input1.indexOf("@"));
input3 = input1.slice(input1.indexOf("@") + 1);
}
var res = new Array();
for (var i = 0; i < postfixList.length; i++) {
if (postfixList[i].indexOf(input3) == 0) {
res[i] = document.createElement('li');
res[i].innerText = input2 + '@' + postfixList[i];
flag = 1;
}
}
if (flag == 0) {
for (var i = 0; i < postfixList.length; i++) {
res[i] = document.createElement('li');
res[i].innerText = input2 + '@' + postfixList[i];
}
}
//去除res数组中的空值
for (var i = 0; i < res.length; i++) {
if (typeof res[i] == "undefined" || res[i].innerText == "") {
res.splice(i, 1);
i--;
}
}
return res;
}
function addPrompt() {
var prompt = setPrompt();
var len = ul.childNodes.length;
//removechild()正常的删除全部节点,应该从后面往前删除。
//原因是当你把索引为0的子节点删除后,那么原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点。
for (var i = len - 1; i >= 0; i--) {
ul.removeChild(ul.childNodes[i]);
}
for (var i = 0; i < prompt.length; i++) {
ul.appendChild(prompt[i]);
}
}
function displayOrHide() {
var input1 = getInput();
if (input1 == "") {
hide();
} else {
display();
}
}
function hide() {
ul.style.display = "none";
}
function display() {
ul.style.display = "block";
}
</script>
</body>
</html>
task3(加上键盘——基于数据的思路)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.email-sug {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 150px;
height: 22px;
line-height: 22px;
font-size: 14px;
}
li:hover {
background-color: antiquewhite;
}
.selected {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="wrapper">
<input id="email-input" type="text">
<ul id="email-sug-wrapper" class="email-sug"></ul>
</div>
<script>
// 增加一个变量,用于存储当前选中的提示Li的序号
var nowSelectTipIndex = 0;
var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
var input = document.getElementById("email-input");
var ul = document.getElementById("email-sug-wrapper");
input.addEventListener("keyup", function (event) {
var event = event || window.event;
//如果按键不是上下及回车重置选中状态
if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
resetIndex();
}
if (event.keyCode == 38) {
if (nowSelectTipIndex == 0) {
nowSelectTipIndex = ul.childNodes.length - 1;
} else {
nowSelectTipIndex--;
}
}
if (event.keyCode == 40) {
if (nowSelectTipIndex >= ul.childNodes.length - 1) {
nowSelectTipIndex = 0;
} else {
nowSelectTipIndex++;
}
}
addPrompt();
displayOrHide();
if (event.keyCode == 13 || event.keyCode == 108) {
// 从当前提示框中选第 nowSelectTipIndex 个Li,将其HTML内容解码后填到input中
input.value = ul.childNodes[nowSelectTipIndex].innerText;
hide();
}
});
ul.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toUpperCase() == 'LI') {
input.value = target.innerText;
hide();
}
}
function resetIndex() {
nowSelectTipIndex = 0;
}
function getInput() {
//拿到input输入框的输入内容trim后返回
var input1 = input.value;
return input1.trim();
}
//生成提示框中的提示内容
function setPrompt() {
var input1 = getInput();
var input2, input3;
var flag = 0; //“@”后的字符串能否在postfixList中找到匹配
if (input1.indexOf("@") == -1) {
input2 = input1;
} else {
input2 = input1.slice(0, input1.indexOf("@"));
input3 = input1.slice(input1.indexOf("@") + 1);
}
var res = new Array();
for (var i = 0; i < postfixList.length; i++) {
if (postfixList[i].indexOf(input3) == 0) {
res[i] = document.createElement('li');
res[i].innerText = input2 + '@' + postfixList[i];
flag = 1;
}
}
if (flag == 0) {
for (var i = 0; i < postfixList.length; i++) {
res[i] = document.createElement('li');
res[i].innerText = input2 + '@' + postfixList[i];
}
}
//去除res数组中的空值
for (var i = 0; i < res.length; i++) {
if (typeof res[i] == "undefined" || res[i].innerText == "") {
res.splice(i, 1);
i--;
}
}
//将第nowSelectTipIndex个Li的样式设置为被选样式
res[nowSelectTipIndex].className = 'selected';
console.log(res);
console.log(nowSelectTipIndex);
return res;
}
function addPrompt() {
var prompt = setPrompt();
var len = ul.childNodes.length;
//removechild()正常的删除全部节点,应该从后面往前删除。
//原因是当你把索引为0的子节点删除后,那么原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点。
for (var i = len - 1; i >= 0; i--) {
ul.removeChild(ul.childNodes[i]);
}
for (var i = 0; i < prompt.length; i++) {
ul.appendChild(prompt[i]);
}
}
function displayOrHide() {
var input1 = getInput();
if (input1 == "") {
hide();
} else {
display();
}
}
function hide() {
ul.style.display = "none";
}
function display() {
ul.style.display = "block";
}
</script>
</body>
</html>