JS---DOM---案例：模拟百度搜索框
程序员文章站
2022-06-27 21:32:06
模拟百度搜索框 我的思路整理： 1. 注册文本框抬起事件(onkeyup) 2. 处理函数： >创建临时数组，循环遍历文本框键入的文字内容和keywords数组，用keyWords[i].indexOf(text) == 0 来判断，true就追加进临时数组tempArr.push(keyWords ......
模拟百度搜索框
我的思路整理：
1. 注册文本框抬起事件(onkeyup)
2. 处理函数：
--->创建临时数组，循环遍历文本框键入的文字内容和keywords数组，用keywords[i].indexof(text) == 0 来判断，true就追加进临时数组temparr.push(keywords[i])
--->bug修复：每一次键盘抬起，都判断页面有没有div，有就删除
--->何时出现div：判断条件：当文本框为空，或临时数字空，不创建div，如果有div，就删除
--->创建div, div加到box, div设置样式 ; 循环遍历创建p，p加入新建的div；加入鼠标进入和移开的样式（在循环里面，用命名函数，减少负荷）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keywords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
my$("txt").onkeyup = function () {
//每一次键盘抬起，都判断页面有没有div
if (my$("dv")) {
//删除一次
my$("box").removechild(my$("dv"));
}
//输入的内容，即文本框里面的内容，和keywords去对比
//获取文本框输入的内容
var text = this.value;
//临时数组--空数组------->存放对应上的数据
var temparr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keywords.length; i++) {
//是否是最开始出现的
if (keywords[i].indexof(text) == 0) {
temparr.push(keywords[i]);//追加进temparr
}
}
//如果文本框为空，且临时数组为空，不创建div
if (this.value.length == 0 || temparr.length == 0) {
//如果页面有div，删除div
if (my$("dv")) {
my$("box").removechild(my$("dv"));
}
return;
}
//创建div 把div加入到名为box的div里面
var dvobj = document.createelement("div");
my$("box").appendchild(dvobj);
dvobj.id = "dv";
dvobj.style.width = "350px";
dvobj.style.border = "1px solid pink";
//循环遍历临时数组，创建对应的p标签
for (var i = 0; i < temparr.length; i++) {
var pobj = document.createelement("p");
//把p加到div里面
dvobj.appendchild(pobj);
setinnertext(pobj, temparr[i]);
pobj.style.margin = 0;
pobj.style.padding = 0;
pobj.style.cursor = "pointer";
pobj.style.margintop = "5px";
pobj.style.marginleft = "5px";
//鼠标进入
pobj.onmouseover = mouseoverhandle;
//鼠标离开
pobj.onmouseout = mouseouthandle;
}
function mouseoverhandle() {
this.style.backgroundcolor = "yellow";
}
function mouseouthandle() {
this.style.backgroundcolor = "";
}
};
</script>
</body>
</html>