模拟百度搜索框

我的思路整理：

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. ApplicationInsights入门到精通系列(一)

    在11月9号的上海.Net Conf开发者峰会上,我做了一个对Application Insights的Persentation,本来想着快速将其转化为一篇博客无赖最近忙成

  2. LESSON 1-Introduction

    Keywords: Communication system, Channel model, Channel capacity by Shannon 1. Two fundamental archit ...

  3. 【RN - 基础】之FlexBox弹性布局

    前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...

  4. Prometheus PromQL 简单用法

    目录 说明 CPU 内存 磁盘监控 磁盘空间利用率百分比 预计饱和 说明 基于上一篇文章的基础,这里做一些关于 CPU.内存.磁盘的一些基础查询语句. CPU 通过查询 metric值为 node_c ...

  5. php弹出确认框

    下面的代码只需要放在同一个文件中就可以运行了~~ html<a href="__URL__/shanchu/id/{$vo.id}" onclick='return del( ...

  6. SpringBoot+Mybatis 实现动态数据源切换方案

    背景 最近让我做一个大数据的系统,分析了一下,麻烦的地方就是多数据源切换抽取数据.考虑到可以跨服务器跨数据库抽数,再整理数据,就配置了这个动态数据源的解决方案.在此分享给大家. 实现方案 数据库配置文 ...

  7. Python协程与Go协程的区别二

    写在前面 世界是复杂的,每一种思想都是为了解决某些现实问题而简化成的模型,想解决就得先面对,面对就需要选择角度,角度决定了模型的质量, 喜欢此UP主汤质看本质的哲学科普,其中简洁又不失细节的介绍了人类 ...

  8. mysql的两阶段协议（封锁定理，虫洞事务）

    我们都知道数据库的事务具有ACID的四个属性:原子性,一致性,隔离性和持久性.然后在多线程操作的情况下,如果不能保证事务的隔离性,就会造成数据的修改丢失(事务2覆盖了事务1的修改结果).读到脏数据(事 ...

  9. shell ssh 远程机器 追加文件内容

    在host1上,把下面的两行内容通过ssh追加到host2上的/etc/ca-certificates.conf文件中 I am a student Are you ok ssh host2 &quo ...

  10. luogu P3110 [USACO14DEC]驮运Piggy Back |最短路

    题目描述 Bessie and her sister Elsie graze in different fields during the day, and in the evening they b ...