模拟百度搜索框之键盘弹起事件
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) ;
}
}
}
</script>
</body>
</html>
