土豆列表含模糊替换方法
作者：互联网
<!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); //×就表示一个X号 oSpan.innerHTML = '×'; 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>
</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); //×就表示一个X号 oSpan.innerHTML = '×'; 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>
标签：30px,back,innerHTML,列表,oAddInput,var,土豆,document,替换 来源： https://www.cnblogs.com/huanxiongs02/p/14672250.html