百度(Nasdaq:BIDU)是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇两人创立于北京中关村,百度致力于向人们提供“简单,可依赖”的信息获取方式。
模拟百度搜索框
我的思路整理:
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;加入鼠标进入和移开的样式(在循环里面,用命名函数,减少负荷)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
#box{
width:450px;
margin:200pxauto;
}
#txt{
width:350px;
}
</style>
</head>
<body>
<divid="box">
<inputtype="text"id="txt"value="">
<inputtype="button"value="搜索"id="btn">
</div>
<scriptsrc="common.js"></script>
<script>
varkeyWords=["小杨才是最纯洁的","小杨才是最帅的","小段是最猥琐的","小超是最龌龊的","传智播客是一个培训机构","传说在传智有个很帅很纯洁的小杨","苹果好吃","苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
my$("txt").onkeyup=function(){
//每一次键盘抬起,都判断页面有没有div
if(my$("dv")){
//删除一次
my$("box").removeChild(my$("dv"));
}
//输入的内容,即文本框里面的内容,和keywords去对比
//获取文本框输入的内容
vartext=this.value;
//临时数组--空数组------->存放对应上的数据
vartempArr=[];
//把文本框输入的内容和数组中的每个数据对比
for(vari=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里面
vardvObj=document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id="dv";
dvObj.style.width="350px";
dvObj.style.border="1pxsolidpink";
//循环遍历临时数组,创建对应的P标签
for(vari=0;i<tempArr.length;i++){
varpObj=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;
}
functionmouseoverHandle(){
this.style.backgroundColor="yellow";
}
functionmouseoutHandle(){
this.style.backgroundColor="";
}
};
</script>
</body>
</html>
百度拥有数千名研发工程师,这是中国乃至全球最为优秀的技术团队,这支队伍掌握着世界上最为先进的搜索引擎技术,使百度成为中国掌握世界尖端科学核心技术的中国高科技企业,也使中国成为美国、俄罗斯、和韩国之外,全球仅有的4个拥有搜索引擎核心技术的国家之一。