1. Add keyboard up event
2. Get the content of the text box
3. Determine whether the content of the text box is empty
4. It is not empty to judge whether it matches the content in the array
5. Create an element to display the found content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use stricts";
//创建数组，用来存储元素样板
var keyWords = ['iphonex','华为p20pro','小米8','华为nova3','小辣椒','iphonexr','iphone8', '小米max3'];
var box=document.getElementById('box');
var txt=document.getElementById('txt');
function fn(){
//判断有没有ul元素
if(document.getElementById('shelper')){
let shelper = document.getElementById('shelper')
box.removeChild(shelper);
}
if(txt.value===null||txt.value.trim()===""){
if(document.getElementById('shelper')){
let shelper = document.getElementById('shelper');
box.removeChild(shelper);
}
return;
}
var tempArr = [];
for(var i=0;i<keyWords.length;i++){
if(keyWords[i].indexOf(txt.value.trim())!=-1){
tempArr.push(keyWords[i]);
}
}
if(tempArr.length===0){
if(document.getElementById('shelper')){
let 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 = '';
}
}
// 为文本框绑定键盘抬起事件
//输入完成时，执行函数fn()
txt.addEventListener('keyup', fn, false);
</script>
<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: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
</body>
</html>
The link to the original text is here: https://www.cnblogs.com/uncle-kay/p/10763183.html is
a bit different from the original text, it is slightly improved