1. Fügen Sie ein Tastatur-Up-Ereignis hinzu
2. Rufen Sie den Inhalt des Textfelds ab
3. Stellen Sie fest, ob der Inhalt des Textfelds leer ist
4. Es ist nicht leer zu beurteilen, ob es mit dem Inhalt im Array übereinstimmt
5. Erstellen Sie ein Element, um den gefundenen Inhalt anzuzeigen
<!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>
Der Link zum Originaltext befindet sich hier: https://www.cnblogs.com/uncle-kay/p/10763183.html unterscheidet sich
etwas vom Originaltext und ist leicht verbessert