模擬百度搜索框
阿新 • • 發佈：2019-01-08
程式碼如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--
總體思路：使用者在文字框裡輸入的是什麼，就來陣列中遍歷每個元素，找輸入的內容是否在遍歷到的元素裡面，如果在，就把這個元素做成li標籤加到ul裡，如果不在就不操作
怎麼判斷在不在字串裡？
xxx.indexOf(內容) != -1
onkeyup事件：
鍵盤彈起時會觸發的事件
-->
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 20px;
}
.box {
width: 600px;
height: 40px;
margin: 200px auto;
position: relative;
}
#txt {
width: 498px;
height: 38px;
border: 1px solid #eee;
font-size: 20px;
}
#search {
width: 100px;
height: 40px;
}
#keywords {
position: absolute;
top: 40px;
left: 0;
background-color: rgb(12, 255, 24);
list-style: none;
width: 500px;;
}
li {
line-height: 24px;
}
/*/!*是li標籤，並且滑鼠移入的時候變紅*!/*/
/*li:hover {*/
/*background-color: red;*/
/*}*/
</style>
</head>
<body>
<div class="box">
<div class="top">
<input type="text" id="txt"/><input type="button" value="search" id="search"/>
</div>
<ul id="keywords"></ul>
</div>
<script>
//查詢使用者輸入的關鍵字，就來這個陣列找
var keywords = ["林利群", "林利群為什麼很黑", "林利群的經紀人是周林林嗎", "林利群是誰", "廣東人", "廣東人愛吃", "廣東人愛吃福建人", "林丹的生平", "JavaScript", "Java", "王思聰", "王健林", "社會王", "隔壁老王", "班長以前為什麼頭髮長", "班長和暢姐不得不說的故事", "林綠群", "班長和暢姐天各一方，但是站著遙望", "aaaa", "hhhh", "cccc"];
//找到顯示結果的ul
var ul = document.getElementById("keywords");
//找到文字框
var txt = document.getElementById("txt");
//給文字框加鍵盤彈起事件（當用戶在文字框裡按鍵盤上的任意鍵並彈起時觸發）
txt.onkeyup = function () {
//事件剛剛觸發就先清空上一次的結果（其實就是把ul清空）
ul.innerHTML = "";
//拿到使用者輸入的內容 this是文字框
var str = this.value;
//如果拿到空字串，就不要執行下面的程式碼
if (str == "") {
return;
}
//遍歷陣列，拿到所有結果
for (var i = 0; i < keywords.length; i++) {
//判斷當前某一個結果裡是否包含使用者輸入的內容
if (keywords[i].indexOf(str) != -1) {
//把當前結果做成li標籤
var li = document.createElement("li");
li.innerHTML = keywords[i];
//新增到ul裡顯示
ul.appendChild(li);
//每建立一個li標籤就加一個滑鼠移入事件
li.onmouseover = function () {
this.style.backgroundColor = "red";
}
//滑鼠移出時把被移出的li顏色清空
li.onmouseout = function () {
this.style.backgroundColor = "";
}
//給每個li加點選事件
li.onclick = function () {
//要拿到被點選的li標籤的內容
//再把內容賦值給文字框
txt.value = this.innerHTML;
ul.innerHTML = "";
}
}
}
};
</script>
</body>
</html>