模拟百度搜索框

我的思路整理：

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. day20191012笔记

    课程默写笔记: 1.程序架构 C/S 客户端/服务器端 B/S 浏览器/服务器端 2.Tomcat应用服务器 tomcat默认端口号是80:tomcat配置文件中通常端口的定义是8080: 3.使用开 ...

  2. 一个http请求的详细过程

    一个http请求的详细过程 我们来看当我们在浏览器输入http://www.mycompany.com:8080/mydir/index.html,幕后所发生的一切. 首先http是一个应用层的协议, ...

  3. centos7安装samba

    samba是一个实现smb协议的开源软件,为局域网内的不同计算机之间提供文件和打印机共享服务. 1.安装yum groupinstall “file-server” -y 2.配置cp /etc/sa ...

  4. 修改python3导致终端打不开

    误操作将/usr/bin/python3文件修改,或者删除,导致终端打不开, 解决办法其实很简单,ctrl+alt+f3进入命令窗口,将python2.7的文件拷贝到python中就可以解决了 sud ...

  5. 小白的springboot之路（一）、环境搭建、第一个实例

    小白的springboot之路(一).环境搭建.第一个实例 0- 前言 Spring boot + spring cloud + vue 的微服务架构技术栈,那简直是爽得不要不要的,怎么爽法,自行度娘 ...

  6. IDEA如何重置窗口布局

    如何重置窗口布局 我不知道怎么搞的,左边的,上边的,下边的,视图都没有了 , 重启了一下,然后重置为默认视图,就好了

  7. Thinkphp5.1 导入第三方包的问题

    一般刚接触tp5.1的,会很不适应,虽然版本号只是比5.0多了0.1,但是差别挺大,废弃了不少方法,官方的教程又很简单,很多东西没说全,在此鄙视一下框架作者,最起码体谅一下小白嘛,搞了好多天才把5.1 ...

  8. 小白探究UE4网络系列(一)、UE4网络基础类分析

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要 捣鼓UE4也有两个多月了,从这儿开始,逐步探究UE4中经典的值复制,RPC两种同步方式.想要弄到其复制和调用的原 ...

  9. variable fonts - 更小更灵活的字体

    原文链接 variable fonts(下文中vf为缩写)是数字时代制作的字体技术,用更小的文件大小在web上提供更丰富的排版,但是一项新的技术往往伴随着新的挑战和复杂未知的情况.不过,我们要拥抱技术 ...

  10. HDU 6405 Make ZYB Happy(广义SAM)

    It's known to all that ZYB is godlike, so obviously he has a large number of titles, such as jskingj ...