案例：模拟百度搜索框
需求分析：
1.键盘松开txt ： 根据搜索内容显示对应搜索列表ul
2.鼠标移入li元素：颜色变红
3.鼠标移出li元素：颜色变原先颜色
4.鼠标点击li元素： （1）搜索框显示点击的li元素文本 （2）情况内容列表ul
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 #ccc;
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;
}
</style>
<script>
// 代码在html上面,onload
window.onload = function () {
// 需求1: 用户输入内容, 从词条中去匹配
// 1. 获取相关元素: ul,输入框
const ul = document.querySelector("#keywords");
const txt = document.querySelector("#txt");
console.log(ul, txt);
// 2. 给输入框增加检测事件: oninput
txt.oninput = function () {
// console.log(123);
// // 2.1 清空前面匹配到到结果: 用户重新输入了,数据要改变.
ul.innerHTML = "";
// 2.2 获取用户输入的数据
let value = this.value.trim();
// console.log(value);
// 2.3 安全判定: 不能为空字符串(用上trim())
if (value == "") return;
// 2.4 去词条匹配: 遍历词条数组
keywords.forEach(function (item) {
// 2.4.1 判定用户输入的内容在词条中能找到: 找到就是匹配上
if (item.indexOf(value) != -1) {
// 2.4.2 匹配成功: 创建li,将词条放到li,li放到ul中
const li = document.createElement("li");
li.innerText = item;
ul.appendChild(li);
// 需求2:鼠标移入移出变色,点击选中放到文本框中,清空匹配
li.onmouseover = function () {
// 修改背景色为红色
this.style.backgroundColor = "red";
};
li.onmouseout = function () {
// 清空背景色:走ul的背景
this.style.backgroundColor = "";
};
li.onclick = function () {
// 将文本放入input框中
txt.value = item;
// 清空ul
ul.innerHTML = "";
};
}
});
};
// 2.1 清空前面匹配到到结果: 用户重新输入了,数据要改变
// 扩展:真实百度搜多
// 用户点击搜索按钮,那用户输入的值 去百度服务器查
document.querySelector("#search").onclick = function () {
// 获取用户输入的内容
let value = txt.value.trim();
// 安全:不能为空
if (value.length == 0) return;
// 跳转百度搜索页面:提供用户输入的关键字
// http://www.baidu.com/s?ie=UTF-8&wd=js
location.assign(`http://www.baidu.com/s?ie=UTF-8&wd=${value}`);
};
};
</script>
<script src="./js/data.js"></script>
</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>
</body>
</html>