效果圖：
上代碼噢：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mm</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;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜尋" id="btn">
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
function setInnerText(element, text) {
if (typeof element.textContent == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
var keyWords = ["百度地圖", "百度賬号", "百度翻譯", "百度金融", "華為商城", "華為最新款", "蘋果官網", "蘋果多少錢"];
//擷取文本框注冊鍵盤擡起事件
my$("txt").onkeyup = function() {
//每一次的鍵盤擡起都判斷頁面中有沒有這個div-------【是個坑】
if (my$("dv")) {
//删除一次
my$("box").removeChild(my$("dv"));
}
//擷取文本框輸入的内容
var text = this.value;
//臨時數組--空數組------->存放對應上的資料
var tempArr = [];
//把文本框輸入的内容和數組中的每個資料對比
for (var i = 0; i < keyWords.length; i++) {
//是否是最開始出現的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]); //追加
}
}
//如果文本框是空的,臨時數組是空的,不用建立div-----【是個坑】
if (this.value.length == 0 || tempArr.length == 0) {
//如果頁面中有這個div,删除這個div
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return;
}
//建立div,把div加入id為box的div中
var dvObj = document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "350px";
//dvObj.style.height="100px";//肯定是不需要的------
dvObj.style.border = "1px solid green";
//循環周遊臨時數組,建立對應的p标簽
for (var i = 0; i < tempArr.length; i++) {
//建立p标簽
var pObj = document.createElement("p");
//把p加到div中
dvObj.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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)