土豆列表含模糊替换方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TODOList</title>
    <style type="text/css">
        body{
            margin: 0;
            background-color: #f5f5f5;
        }
        h1{
            /* margin: 30px 0 0 0; */
            color: #ff5550;
            text-align: center;
            font-size: 60px;
        }
        #back{
            width: 300px;
            margin: 0 auto;
            border: 1px solid #333;
            box-shadow: 0px 0px 3px #999;
            background-color: #fff;
        }
        #back input{
            width: 100%;
            box-sizing: border-box;
            line-height: 30px;
            border: none;
            border-bottom: 1px solid #000;
            padding: 5px 15px;
            font-size: 18px;
        }
        #list_back .single{
            position: relative;
            border-bottom: 1px solid #000;
        }
        #list_back .single p{
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            padding: 5px 15px;
        }
        #list_back .single span{
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }
    </style>  
</head>
<body>
<h1>todos</h1>
<div id="back">
    <input id="addInput" type="text" name="">
    <div id="list_back">

    </div>
</div>
<script type="text/javascript">
    var oAddInput = document.getElementById('addInput');
    var oList_back = document.getElementById('list_back');
    var all = document.getElementsByClassName('single');
    oAddInput.onkeyup = function(){
        // alert(event.keyCode);//13
        // alert(event.code);//Enter
        //表示如果点击回车键
        if(event.keyCode == '13'){
            // alert('add');
            var oDiv = document.createElement('div');
            var oSpan = document.createElement('span');
            var oP = document.createElement('p');
            oDiv.appendChild(oP);
            oDiv.appendChild(oSpan);
            oP.innerHTML = oAddInput.value;
            // alert(oAddInput.value);
            //&times;就表示一个X号
            oSpan.innerHTML = '&times;';
            oDiv.className = 'single';
            oList_back.appendChild(oDiv);
            oAddInput.value = '';//清空输入框
            oSpan.onclick= function(){
                oList_back.removeChild(this.parentNode);//绑定删除方法
            };
        }
    };
    模糊查询
    function select(){
        oAddInput.addEventListener('keyup', function(e){//监听键盘抬起事件（所有键盘按钮）
            // console.log(e.target.value);
            var str = e.target.value;
            var reg = new RegExp('(' + str + ')', 'g');//匹配到的文字变红色，准备工作
            for( var i = 0; i<all.length; i++ ){
                var one = all[i].getElementsByTagName('p')[0];//因为getElementByTagName用[0]表示取其中的第一个
                var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');//换-->红色，用innerText防止用innerHTML将标签也读取出来出错。
                if( one.innerText.indexOf(str) == -1 ){//也选用innerHTML
                    all[i].style.display = 'none';//匹配不到的掩藏
                }else{
                    one.innerHTML = newStr;//匹配到的变红
                }
            }
            if(str == ''){
                for( var i = 0; i<all.length; i++ ){
                    all[i].style.display = 'block';//输入框空时全部显示
                }
            }
        });
    }
    select();  //函数解析完就运行
    
</script>
</body>
</html>
posted @ 2021-04-17 21:42  浣熊sky  阅读(131)  评论(0)    收藏  举报