模拟百度搜索框

我的思路整理：

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. linux目录相关操作

    mkdir:新建目录 mkdir [-mp] 目录名称 -m:配置文件权限,直接设置,不需要看默认权限(umask) -p:递归创建目录 rmdir:删除空目录 rmdir [-p] 目录名称 -p: ...

  2. day 41 css固定位置 以及小米商城项目

    .如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...

  3. Linux目录结构-上部

    第1章 目录结构 1.1 目录结构特点 倒挂的树状结构一切从根开始一切皆文件 1.2 目录结构 /bin            二进制文件  命令 /sbin           超级命令只有root ...

  4. getElementById()

    getElementById():方法的用途是寻找一个有着给定id属性值得元素: element = document.getElementById(ID); 这个方法将返回一个有着给定id属性值得元 ...

  5. 二进制安装 k8s 1.15.6 集群

    目录: 第一篇 环境介绍与基础配置 第二篇 部署前期准备工作 第三篇 ETCD 集群部署 第四篇 master节点的部署介绍和前置工作 第五篇 kube-nginx 和 keepalived 部署安装 ...

  6. Sublime Text 3 免费注册方法（福利）

    对于使用Sublime Text但是又不愿花钱注册的小伙伴,福利到了,免费注册一下你的Sublime吧. 版本3207: 打开Sublime text,然后点击菜单Help->Enter Lis ...

  7. C/C++资料

    链接:https://pan.baidu.com/s/1kLLA-teI7Jzxhozx1R6NMw 提取码:6hpb

  8. Python列表中的字典按照该字典下的键值进行排序

    列表中的字典按照该字典下的键值进行排序 这算是排序中比较复杂的一种情况吧,多重嵌套,按照某种规则进行排序.如下面这个json(注:这里这是该列表中的一个项): [ { "stat" ...

  9. iOS 日志获取和实时浏览器显示日志

    https://juejin.im/entry/576252855bbb500063e51c7d iOS 日志获取和实时浏览器显示日志

  10. The file “XXX.app” couldn’t be opened because you don’t have permission to view it.问题修复

    出现下列问题 怎么解决呢 如图 将info.plist的文件中的Executable.file中的文件修改为:$(PRODUCT_NAME) 重新编译 com+R不出意外的话 运行成功 ok 解决~