IFE第二十八天到第三十天：给爱的人发个邮件吧（邮箱输入下拉框提示功能）

野性酷女 2022-05-15 05:45 40阅读 0赞

### task1 ###

### 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了，程序继续走时就会删除原先索引为２的现在为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了，程序继续走时就会删除原先索引为２的现在为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>