文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:JS---DOM---案例:模拟百度搜索框

编程巫师

编程巫师

2024-04-23 23:43

关注

  百度(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个拥有搜索引擎核心技术的国家之一。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     428人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     199人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     159人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     239人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     62人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯