功能:在input框编辑一段文本,按回车键输入;下次再输入任何可以匹配到的内容时,会在下方提示已输入的模板,重复字体标红处理,模板右边有一个 X 可以删除模板内容。
实现效果如图所示:
其实就是键盘事件,样式方面还可以更加优化,此处请将就一下哈!
上代码!
DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Demotitle>
<meta name="keywords" content="keywords">
<meta name="description" content="description">
<meta name="author" content="danew">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body{font-family: "Microsoft YaHei",serif;}
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul,li{margin:0;padding:0;list-style:none;}
img{border:none;}
#wrap{
width: 440px;
line-height: 50px;
margin:50px auto;
box-shadow: #ccc 1px 2px 10px;
}
#wrap .arrow{
display: inline-block;
width: 40px;
line-height: 50px;
text-align: center;
transform: rotate(180deg);
}
#input{
width: 400px;
height: 50px;
font-size: 16px;
border:none;
outline: none;
}
.list{
width: 100%;
overflow: hidden;
}
.list.off{
height: 0;
}
.list.off li{
height: 0;
}
.list li{
position: relative;
width: 400px;
height: 50px;
padding-left: 40px;
border-top:1px solid #eee;
}
.list li .delete{
position: absolute;
right:20px;
color:#654321;
cursor: pointer;
}
.list li .delete:hover{
color:red;
}
style>
head>
<body>
<div id="wrap">
<span class="arrow">^span><input id="input" type="text">
<ul class="list ">
ul>
div>
<script>
let Inp = document.getElementById("input");
let list = document.getElementsByClassName("list")[0];
let oContent = document.getElementsByClassName("content");
let arr = {};
function dele(e){
let node = e.target.parentNode;
let content = node.children[0].innerHTML;
list.removeChild(node)
delete arr[content];
}
function createLi(val){
if(arr[val])return;
let oF = document.createDocumentFragment();
let oLi = document.createElement("li");
let span = document.createElement("span");
let spanC = span.cloneNode();
let spanX = span.cloneNode();
spanC.className = "content";
spanC.innerHTML = val;
spanX.className = "delete";
spanX.innerHTML = "X";
spanX.onclick = dele;
oLi.appendChild(spanC)
oLi.appendChild(spanX)
oF.appendChild(oLi);
list.appendChild(oF);
}
Inp.onkeyup=function (e) {
if(e.keyCode === 13){ //回车键
createLi(this.value);
arr[this.value]=1;
this.value='';
}
// 匹配节点
if(this.value && this.value!==' '){
list.classList.remove("off")
const val = this.value;
let len = oContent.length; //所有可匹配节点
for(let i=0;i<len;i++){
let txt = oContent[i].innerText;
if(txt.includes(val)){
let reg = new RegExp(val,'g');
let result = txt.replace(reg,""+val+"")
oContent[i].innerHTML = result;
oContent[i].parentNode.style.display = "block";
}else{
oContent[i].parentNode.style.display = "none";
}
}
}else{
list.classList.add("off")
}
}
script>
body>
html>
有问题可以留言哟,这代码还有可优化的地方,欢迎大家提建议!