1.添加键盘抬起事件
2.获取文本框的内容
3.判断文本框的内容是否为空
4.不为空判断是否与数组里的内容匹配
5.创建元素将查到的内容显示出来
<!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>
原文链接在这里:https://www.cnblogs.com/uncle-kay/p/10763183.html
跟原文有点不一样,稍微完善了一下