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は
元のテキストとは少し異なり、少し改善されています