模拟百度搜索框

我的思路整理：

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. EntityFramework Core 3.0查询

    前言 随着.NET Core 3.0的发布,EF Core 3.0也随之正式发布,关于这一块最近一段时间也没太多去关注,陆续会去对比之前版本有什么变化没有,本节我们来看下两个查询. 分组 我们知道在E ...

  2. linux下的du和df的区别

    du(disk usage)是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在的,没有被删除的.他计算的大小就是当前他认为存在的所有文件大小的累加和. df(disk fre ...

  3. 最短路径算法（跟新SPFA，Ford）

    //以城市路为蓝本介绍算法 1381:城市路(Dijkstra) 时间限制: 1000 ms         内存限制: 65536 KB提交数: 4517     通过数: 1306 [题目描述] ...

  4. 堆的python实现及其应用

    堆的概念 优先队列(priority queue)是一种特殊的队列,取出元素的顺序是按照元素的优先权(关键字)大小,而不是进入队列的顺序,堆就是一种优先队列的实现.堆一般是由数组实现的,逻辑上堆可以被 ...

  5. 7. 彤哥说netty系列之Java NIO核心组件之Selector

    --日拱一卒,不期而至! 你好,我是彤哥,本篇是netty系列的第七篇. 简介 上一章我们一起学习了Java NIO的核心组件Buffer,它通常跟Channel一起使用,但是它们在网络IO中又该如何 ...

  6. Codeforces Round #451 (Div. 2) A B C D E

    Codeforces Round #451 (Div. 2) A Rounding 题目链接: http://codeforces.com/contest/898/problem/A 思路: 小于等于 ...

  7. 【我的物联网成长记6】由浅入深了解NB-IoT【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  8. Apache ServiceComb 开源两周年，聊聊其与微服务的前世今生

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  9. 【限时免费】从入门到实战，5节课玩转Kafka！赢音箱、书籍好礼！

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  10. 3Sum Time Limit Exceeded HashMap 优化过程

    昨晚,在做leetcode上的3Sum题目时,感觉这道题目和2Sum很像,当时解决2Sum时,思路如下: 用HashMap的key存储 num[i],value存储下标 i,之后在遍历数组num时,判 ...