Baiduの検索バーの検索のガイドライン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 {
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="text" value="">
<input type="button" value="搜索" id="btn">
</div>
<script>
var keyWords = ["疫情还在继续", "爱情公寓5已经完结", "教育厅严禁线上上课"];
document.getElementById("text").onkeyup = function () {
if(document.getElementById("div")){
document.getElementById("box").removeChild(document.getElementById("div"));
}
var text = this.value;
var tempArr = [];
for (var i = 0; i < keyWords.length; i++) {
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);
}
}
if (this.value.length == 0 || tempArr.length == 0) {
if (document.getElementById("div")) {
document.getElementById("box").removeChild(my$("div"));
}
return;
}
var divObj = document.createElement("div");
document.getElementById("box").appendChild(divObj);
divObj.id = "div";
divObj.style.width = "350px";
divObj.style.border = "1px solid green";
for (var i = 0; i < tempArr.length; i++) {
var pObj = document.createElement("p");
divObj.appendChild(pObj);
setInnerText(pObj, tempArr[i]);
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = "pointer";
pObj.style.marginTop = "5px";
pObj.style.marginLeft = "5px";
pObj.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>