模拟百度搜索框

我的思路整理：

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>

JS---DOM---案例：模拟百度搜索框的更多相关文章

  1. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  2. ajax实现异步前后台交互，模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  3. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  5. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  6. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  7. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  8. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  9. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

随机推荐

  1. github上传文件让别人下载--xdd

    一.可以下载的条件 仓库要为公开(public) 该文件不可预览或者是图片,如.rar  .gif .png .doc .pdf 等格式 二.打开文件的预览界面,如下 三.将最上面的地址复制给别人即可 ...

  2. Redis高可用演进（一）

    原文链接:http://www.cnblogs.com/chenty/p/5152878.html 最近整理Redis,对sentinel有了更深入的理解,特地总结如下 1.主从Redis 主从red ...

  3. sublimetext使用教程

    图片来自网络,仅供参考 前言 随着我们编写的代码越来越复杂,DevC++以不再能满足我们的需求,所以,我们需要 一个能够进行调试,编译,运行等等功能的现代化ide,sublimetext(以下简称ST ...

  4. Rust 入门 (四)

    所有权是 rust 语言独有的特性,它保证了在没有垃圾回收机制下的内存安全,所以理解 rust 的所有权是很有必要的.接下来,我们来讨论所有权和它的几个特性:借用.切片和内存结构. 什么是所有权 Ru ...

  5. MySQL统计各个表中的记录数

    通过下面的SQL语句可以统计出数据库的各个表中的记录数: select table_schema, table_name,table_rows from information_schema.tabl ...

  6. web接口与restful规范

    web接口 接口定义: 通过网络,规定了前后台信息交互规则的url链接,在web程序中也就是联系前台页面与后台数据库的媒介. 接口特点 url:长得像返回数据的url链接, 例如下面的搜索音乐 [ht ...

  7. 如何提高 PHP 代码的质量？第二部分 单元测试

    在“如何提高 PHP 代码的质量?”的前一部分中:我们设置了一些自动化工具来自动检查我们的代码.这很有帮助,但关于我们的代码如何满足业务需求并没有给我们留下任何印象.我们现在需要创建特定代码域的测试. ...

  8. KFC-位置分页爬虫

    import requests import json if name == 'main': #记录总数 raw_count=0 #查询页数 page=1 #存储数据 data=[] #判断有无数据条 ...

  9. python中68个内置函数的总结

    内置函数 内置函数就是python给你提供的, 拿来直接用的函数, 比如print., input等. 截止到python版本3.6.2 python一共提供了68个内置函数. #68个内置函数 # ...

  10. JavaScript新手经常遇到的问题（二）

    1.Form表单只提交数据而不进行页面跳转的方法 <script type="text/javascript" src="js/jquery/jquery-1.8. ...