js模擬實現百度搜索
阿新 • • 發佈：2020-06-29
本文例項為大家分享了js實現百度搜索的具體程式碼，供大家參考，具體內容如下
總體思路：使用者在文字框裡輸入的是什麼，就來陣列中遍歷每個元素，找輸入的內容是否在遍歷到的元素裡面，如果在，就把這個元素做成li標籤加到ul裡，如果不在就不操作
怎麼判斷在不在字串裡？
xxx.indexOf(內容) != -1
onkeyup事件：
鍵盤彈起時會觸發的事件
效果圖：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<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 = ["zhongqiulan","linda為什麼很黑","who are linda","廣東人","廣東人愛吃","廣東人愛吃福建人","林丹的生平","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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。