API之模拟百度搜索
步骤
- 定义一个keyWords字符串数组
- 获取所有需要的元素(获取文本框)
- 文本框注册键盘抬起事件,以及书写事件函数
- 事件函数中首先要获取去文本框内输入的内容
- 然后创建一个临时数组,存放对应的数据
- 把输入的字符和最开始定义的keyWords数组中的每一项数据做对比,那么就需要一个循环
- 如果输入的字符和数组中每一项数据的0位置上的字符能顾匹配上,那么就把它放入临时数组里
- 如果文本框内没有输入内容或者临时数组为空,那么就不创建div
- 如果用户输入的值和临时数组里面的数据相匹配,那么开始便利临时数组,创建div,然后把div加入box中
- 每次键盘抬起都判断有没有后面加的div,如果有那么就删除
代码如下:
<body>
<div id="box">
<input type="text" value="" id="txt">
<input type="button" value="搜索" id="btn">
</div>
<script>
var keyWords = ['小样酸q糖', '小样我就这样', '小机灵鬼', '小仙女', '别---薛之谦', '别那么骄傲-----金海心', '许嵩----明智之举', '许仙白娘子', '小龙女杨过', '白羊', '白夜行'];
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
//注册键盘抬起事件,并书写事件函数
txt.onkeyup = function () {
//获取文本框输入的内容
var text = this.value;
//创建一个临时数组,存放对应的数据;
var tempArr = [];
//把输入的字符串和keyWord数组中的数据的每一项作对比
for (var i = 0; i < keyWords.length; i++) {
//如果输入的字符和数组中是0位置出现的能匹配上,就把数据放入临时数组里
if (keyWords[i].indexOf(text) === 0) {
tempArr.push(keyWords[i]);//把数据追加到最后
}
}
//临时数组已经存在
var box = document.getElementById('box');
var dv = document.getElementById('dv');
//每次键盘抬起都判断有没有dv这个div
if (dv) {
//如果有就删除一次
box.removeChild(dv);
}
//如果文本框是空的或者临时数组是空的,不用创建div
if (this.value.length === 0 || tempArr.length === 0) {
// 判断页面中是否有div,有则删除
if (dv) {
box.removeChild(dv);
}
return;
}
//如果文本框内的值和临时数组内的内容相匹配,那么开始遍历临时数组,创建div,然后把div加入到box中
var divObj = document.createElement('div');
box.appendChild(divObj);
divObj.id = 'dv';
divObj.style.width = '500px';
divObj.style.border = '1px solid green';
for (var i = 0; i < tempArr.length; i++) {
var pObj = document.createElement('p');
divObj.appendChild(pObj);
pObj.innerText = tempArr[i];
pObj.style.margin = '0';
pObj.style.padding = '0';
pObj.style.marginLeft = '5px';
pObj.style.marginTop = '5px';
pObj.style.cursor = 'pointer';
pObj.onmouseover = function () {
this.style.backgroundColor = '#def';
}
pObj.onmouseout = function () {
this.style.backgroundColor = '';
}
}
}
</script>
</body>