模拟百度搜索框之历史记录
2019-05-15 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 模拟百度搜索框之历史记录 </title>
<!--键盘弹起事件：onkeyup:
因为不管你输入什么，只要输入完了键盘都会弹起，换句话说，键盘弹起了你就是把这个字符输入-->
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 20px;
background: url('../images/01.jpg')no-repeat;
background-size: 100%;
}
.box {
width: 620px;
height: 40px;
margin: 200px auto;
position: relative;
}
#txt {
width: 498px;
height: 38px;
border: 1px solid #eee;
font-size: 20px;
}
#search {
width: 120px;
height: 43px;
}
#keywords {
position: absolute;
top: 163px;
left: 0;
background-color: rgb(210, 127, 243);
list-style: none;
width: 500px;
;
}
li {
line-height: 24px;
}
img {
margin: 25px 210px;
}
/* li:hover{
background-color: red;
} */
</style>
</head>
<body>
<div class="box">
<!-- 输入的地方 -->
<div class="top">
<img src="../images/02.png" alt="度娘" id="img">
<input type="text" id="txt" /><input type="button" value="百度一下" id="search" />
</div>
<!-- 展现联想结果的地方 -->
<ul id="keywords"></ul>
<!-- 步骤：
1.给文本框加键盘弹起事件
2.弹起事件里拿到输入的内容
3.去数组遍历，看数组的元素有没有包括这个内容
4.如果包括就做成li标签加到ul里面
5.每次键盘弹起之前先清空上一次的结果
6.如果输入的内容为空就return
-->
<script>
var keywords = ["林更新", "林允儿", "武林外传", "王思聪", "王传福", "广东", "广西", "林丹枫",
"王健林", "隔壁老王", "你打球像蔡徐坤", "byb"
];
// 找到文本框
var txt = document.getElementById('txt');
document.getElementById('img').onclick = function () {
window.open("https://www.baidu.com");
}
// 找到ul
var ul = document.getElementById('keywords');;
// 给文本框加键盘弹起事件
txt.onkeyup = function () {
// 清除上一次的输入结果
ul.innerHTML = "";
// 拿到文本框输入的内容去数组查是否存在
var add = txt.value;
// 如果输入的内容为空，根本就没必要去联想
if (add == "") {
return;
}
// 遍历数组，看在不在每个元素里面
for (var i = 0; i < keywords.length - 1; i++) {
// 如果输入的内容，在这个元素里面
if (keywords[i].indexOf(add) != -1) {
// 创建空元素 创建出来后只在内存中，没有加到页面上
var li = document.createElement('li');
// 添加文本 = 赋值 (把keywords[i]的值传给 li )
li.innerText = keywords[i];
// 将创建出来的元素添加到ul
ul.appendChild(li);
}
}
}
// 保存历史记录
// 找到搜索按钮，加点击事件
document.getElementById('search').onclick = function () {
// 如果为空没必要往下继续
if (txt.value == "") {
return;
}
// 获取之前保存的记录
var history = localStorage.getItem('history'); //null
if (history == null) {
// null代表第一次来这个网站，第一次这个网站，那么应该你输入什么内容
// 就直接存起来
history = txt.value;
} else {
// 不等于null代表第N次了，前面已经有数据了，你必须在前面的数据后面加逗号再加这次的内容才行；
history += "," + txt.value;
}
localStorage.setItem('history', history);
}
// 给文本框加获得焦点事件
txt.onfocus = function () {
//取出保存的历史记录
var history = localStorage.getItem('history');
// 判断有没有历史记录
if (history == null) {
return;
}
// split 分离 ;在鼠标移出文本框后,将文本框的内容用逗号隔开;
// 创建一个变量将历史记录保存起来,并用逗号隔开;
var arr = history.split(',');
// console.log(arr);
// 显示历史记录
// 遍历历史记录
for (var i = 0; i < arr.length; i++) {
// 添加元素
var li = document.createElement('li');
// li 拿到 arr 里的历史记录
li.innerText = arr[i] ;
// 显示元素(li)的内容
ul.appendChild(li) ;
// 给 li 添加鼠标移入事件
li.onmouseover = function() {
// 移入谁,谁改变谁
this.style.backgroundColor = "red";
}
// 给 li 添加鼠标移出事件
li.onmouseout = function() {
this.style.backgroundColor = "";
}
// 给 li 添加点击事件
li.onclick = function () {
// 谁被点击就把谁的内容传给文本框
txt.value = this.innerHTML;
}
}
}
// 给文本框添加失去焦点事件
txt.onblur = function () {
// 添加定时器
setTimeout(function () {
// 将ul里的内容清空
ul.innerHTML = "";
},100);
}
</script>
</body>
</html>
