<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#box #bth {
width: 350px;
}
#dv3 {
width: 170px;
/*height:100px;*/
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">
<input type="buttom" value="" id="btn">
<input type="button" value="点击">
</div>
<script src="common.js"></script>
<script>
//键盘弹起事件 onkeyup
//默认数据库
var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的",
"小超是最龌龊的", "我是一个培训机构", "传说在有个很帅很纯洁的小杨",
"苹果好吃", "苹果此次召回还是没有中国"];
//获取键盘弹起事件,在键盘弹起地时候做如下操作
my$("btn").onkeyup = function () {
//每次键盘弹起查看是有这给元素,有就删除
if (my$("dv3")) {
//删除一次
my$("box").removeChild(my$("dv3"));
}
//得到当前文本框地值
var text = this.value;
//空数组,存值
var tempArr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keyWords.length; i++) {
//是否是最开始出现的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);//追加
}
}
//如果文本没有数据,临时数组也没有数据,就不用创建
if (this.value.length == 0 || tempArr.length == 0) {
if (my$("dv3")) {
my$("box").removeChild(my$("dv3"));
}
return;//结束整个函数,不在往下执行
}
var dvObj = document.createElement("div");//在id为box中添加标签div
my$("box").appendChild(dvObj);
dvObj.id = "dv3";//设置dov标签地id
//循环得到新数组地每个值
for (var i = 0; i < tempArr.length; i++) {
var pObj = document.createElement("p");//在div中添加p标签
dvObj.appendChild(pObj);
pObj.innerHTML = tempArr[i];//把新数组中地每个元素给p
pObj.onmouseover = function () {//可以使用命名函数
this.style.backgroundColor = "red";
}
pObj.onmouseout = function () {
this.style.backgroundColor = "";
}
}
}
</script>
</body>
</html>
模拟百度输入框事件
最新推荐文章于 2022-03-23 21:10:11 发布