js小项目:显示与输入的内容相关的

1，添加键盘抬起事件

2，获取文本框的内容，是否与数组中的内容匹配

3，创建元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }

    #txt {
      width: 350px;
    }

    #pop {
      width: 350px;
      border: 1px solid red;
    }

    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;

    }

    #pop ul li {

    }
    ul {
        margin: ;
        padding: ;
        list-style: none;
    }
  </style>
</head>
<body>

<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">
</div>

<script>
    var keyWords = ['iphonex', '华为p20pro', '小米8', '华为nova3', '小辣椒', 'iphonexr', 'iphone8', '小米max3']
    // div
    var box = document.getElementById('box');
    // 文本框
    var txt = document.getElementById('txt');

    // 命名函数
    function fn() {
        // 判断有没有ul元素
        if (document.getElementById('shelper')) {
            var shelper = document.getElementById('shelper')
            box.removeChild(shelper);
        }

        // 临时数组：存放匹配到的内容
        var tempArr = [];
        // 检测输入的内容
        for (var i = ; i < keyWords.length; i++) {
            // 如果输入的内容与数组中匹配，
            if (keyWords[i].indexOf(txt.value) === ) {
                tempArr.push(keyWords[i]);    // 追加到临时数组
            }
        }

        // 当输入的内容为空，或者临时数组没有
        if (txt.value.length ===  || tempArr.length === ) {
            // 删除ul元素
            if (document.getElementById('shelper')) {
                var shelper = document.getElementById('shelper')
                box.removeChild(shelper);
            }
            return;     // 以下代码不执行
        }

        // 创建ul
        var ulObj = document.createElement('ul');
        box.appendChild(ulObj);
        ulObj.id = 'shelper';
        ulObj.style.width = '350px';
        ulObj.style.border = '1px solid red';
        // 创建li
        tempArr.forEach(function (item) {
            var liObj = document.createElement('li');
            liObj.innerText = item;
            liObj.style.padding = '5px 0 5px 5px';
            liObj.style.cursor = 'pointer';
            ulObj.appendChild(liObj);
            // 绑定鼠标进入事件
            liObj.addEventListener('mouseover', mouseOver, false);
            // 绑定鼠标离开事件
            liObj.addEventListener('mouseout', mouseOut, false);
        });

        // 鼠标进入事件
        function mouseOver() {
            this.style.backgroundColor = '#ccc';
        }
        // 标离开事件
        function mouseOut() {
            this.style.backgroundColor = '';
        }

    }

    // 为文本框绑定键盘抬起事件
    txt.addEventListener('keyup', fn, false);
</script>

</body>
</html>

job