实现一个 百度搜索框 （搜索提示） #174
Comments
|
+高亮 |
//这题好像和todos是同一题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TODOList</title>
<style>
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;
}
#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;
}
#addInput {
width: 100%;
box-sizing: border-box;
line-height: 30px;
}
</style>
</head>
<body>
<h1>todos</h1>
<div id="back">
<input type="text" name="" id="addInput">
<div id="list_back">
</div>
</div>
<script>
let elAddInput = document.getElementById('addInput')
let elListBack = document.getElementById('list_back')
let all = document.getElementsByClassName('single')
elAddInput.onkeyup = function(){
if(event.keyCode=='13'){
// 每一行
let myDiv = document.createElement('div')
let mySpan = document.createElement('span')
let myP = document.createElement('p')
myDiv.appendChild(myP)
myDiv.appendChild(mySpan)
mySpan.innerHTML = 'x'
myP.innerHTML = elAddInput.value
myDiv.className = 'single'
elListBack.appendChild(myDiv)
elAddInput.value = ''
mySpan.onclick = function(){
// this是elSpan,parentNode是div
elListBack.removeChild(this.parentNode)
}
}
}
// 模糊查询
elAddInput.addEventListener('keyup', function(e){//监听键盘抬起事件（所有键盘按钮）
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];
// 加入font标签
if( one.innerText.indexOf(str) == -1 ){//也选用innerHTML
all[i].style.display = 'none';//匹配不到的掩藏
}else{
var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');
//换-->红色，用innerText防止用innerHTML将标签也读取出来出错。
one.innerHTML = newStr;//匹配到的变红
}
}
if(str == ''){
for( var i = 0; i<all.length; i++ ){
all[i].style.display = 'block';//输入框空时全部显示
}
}
});
}
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: