1，添加键盘抬起事件

2，获取文本框的内容，是否与数组中的内容匹配

3，创建元素

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 450px;

      margin: 200px auto;

    }

    #txt {

      width: 350px;

    }

    #pop {

      width: 350px;

      border: 1px solid red;

    }

    #pop ul {

      margin: 10px;

      padding: 0px;

      width: 200px;

      list-style-type: none;

    }

    #pop ul li {

    }

    ul {

        margin: ;

        padding: ;

        list-style: none;

    }

  </style>

</head>

<body>

<div id="box">

  <input type="text" id="txt" value="">

  <input type="button" value="搜索" id="btn">

</div>

<script>

    var keyWords = ['iphonex', '华为p20pro', '小米8', '华为nova3', '小辣椒', 'iphonexr', 'iphone8', '小米max3']

    // div

    var box = document.getElementById('box');

    // 文本框

    var txt = document.getElementById('txt');

    // 命名函数

    function fn() {

        // 判断有没有ul元素

        if (document.getElementById('shelper')) {

            var shelper = document.getElementById('shelper')

            box.removeChild(shelper);

        }

        // 临时数组：存放匹配到的内容

        var tempArr = [];

        // 检测输入的内容

        for (var i = ; i < keyWords.length; i++) {

            // 如果输入的内容与数组中匹配，

            if (keyWords[i].indexOf(txt.value) === ) {

                tempArr.push(keyWords[i]);    // 追加到临时数组

            }

        }

        // 当输入的内容为空，或者临时数组没有

        if (txt.value.length ===  || tempArr.length === ) {

            // 删除ul元素

            if (document.getElementById('shelper')) {

                var shelper = document.getElementById('shelper')

                box.removeChild(shelper);

            }

            return;     // 以下代码不执行

        }

        // 创建ul

        var ulObj = document.createElement('ul');

        box.appendChild(ulObj);

        ulObj.id = 'shelper';

        ulObj.style.width = '350px';

        ulObj.style.border = '1px solid red';

        // 创建li

        tempArr.forEach(function (item) {

            var liObj = document.createElement('li');

            liObj.innerText = item;

            liObj.style.padding = '5px 0 5px 5px';

            liObj.style.cursor = 'pointer';

            ulObj.appendChild(liObj);

            // 绑定鼠标进入事件

            liObj.addEventListener('mouseover', mouseOver, false);

            // 绑定鼠标离开事件

            liObj.addEventListener('mouseout', mouseOut, false);

        });

        // 鼠标进入事件

        function mouseOver() {

            this.style.backgroundColor = '#ccc';

        }

        // 标离开事件

        function mouseOut() {

            this.style.backgroundColor = '';

        }

    }

    // 为文本框绑定键盘抬起事件

    txt.addEventListener('keyup', fn, false);

</script>

</body>

</html>

job

js小项目:显示与输入的内容相关的的更多相关文章

  1. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  2. Node.js小项目——学生信息管理系统

    这是迄今为止第一次接触后端的东西,是一个很小的项目,但是对于前端学习入门很好.我是先学了VUE框架再学的Node,学起来比较轻松,不过每个人都有自己的学习方法️ 一.项目描述 学生信息管理系统,可以实 ...

  3. js和jquery获取textarea输入的内容

    document.getElementById('textarea').value; $("#textarea").val()

  4. opencv.js小项目demo

    1.博客连接 https://blog.csdn.net/weixin_38361925/article/details/82528529 2.demo连接 https://github.com/mt ...

  5. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. NGUI---使用脚本控制聊天系统的内容显示，输入事件交互

    在我的笔记Unity3D里面之 简单聊天系统一 里面已经介绍怎么创建聊天系统的背景.给聊天系统添加滚动条,设置Anchor锚点.以及设计聊天系统的输入框. 效果图如下所示: 现在我们要做的就是使用脚本 ...

  7. php小项目-web在线文件管理器

    php小项目-web在线文件管理器 一 项目结果相关视图 二 项目经验 通过简单的实现小项目,对php的文件相关操作更加熟悉,主要用于熟悉文件的相关操作 三 源代码下载地址 http://files. ...

  8. 微信小程序 获得用户输入内容

    在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content&quo ...

  9. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

随机推荐

  1. python学习笔记：文件操作和集合

    一.文件操作 文件读写步骤:有一个文件,打开文件,操作文件读写文件,关闭文件. python 文件读写模式r,r+,w,w+,a,a+的区别(附代码示例) 模式 可做操作 若文件不存在 是否覆盖 r ...

  2. MySQL-技术专区-mysql数据库权限管理

      登入root账户 mysql -u root -p 查看所有用户 select host,user from mysql.user; 查看某个用户的权限: show grants for user ...

  3. Neo4J空间数据存储

    1.Neo4j Spatial 简介 1.1Neo4j Spatial概念 Neo4j Spatial项目是图数据库Neo4j的一个插件,它通过将空间数据映射到图模型(graph model),它将对 ...

  4. 域名访问和ip访问区别

    域名访问和ip访问区别 ip访问对应某一台确定的服务器: 域名访问相当于在ip访问的基础上,做了一个反向代理的中间功能.例如:百度,很多人会同时使用,如果使用的是同一台服务器的话,服务器估计会扛不住, ...

  5. Redis Desktop Manager连接Redis 遇到的一系列问题

    最近在做一个土地项目的后台,主要是一个信息采集调查系统,使用的框架是: * 核心框架:Spring Framework 4.2 * 日志管理:SLF4J 1.7.Log4j 1.2 * 视图框架:Sp ...

  6. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest K TV Show Game 2-sat

    题目传送门 题意: 有n个人,k盏灯,灯有红蓝两种颜色,每个人都猜了三种灯的颜色,问如何安排灯的颜色,使得每个人猜的灯至少有两个是对的. 思路: 很容易想到2-sat,但是显然枚举每个人猜对的情况是不 ...

  7. 重新创建redis集群的注意事项

    一.重新创建redis集群的注意事项 1.将每个节点下aof.rdb.nodes.conf本地备份文件删除: 2.127.0.0.1:7001> flushdb #清空当前数据库(这一步可以省略 ...

  8. 在linux设置/etc/vimrc 将vim 中后缀.sh的文件 的前几行进行默认输入

    输入vim test.sh 新建后缀sh的文件,效果如下: 具体/etc/vimrc配置为: if expand("%:e") == 'sh'  call setline(1,&q ...

  9. foreach循环的跳出

    由于foreach循环中不像for循环可以直接通过return或break来终止当前循环,不过这里可以借助try...catch...来完成var arr = [1,2,3,4,5,6,7,8,9,1 ...

  10. 关于if else 和 三目运算符的效率问题-java

    1.从类型转换上看,因为三目运算符在做判断的时候需要考虑到类型转换的问题,而if else 不需要考虑类型转换. 所以 if else 效率高一点. 2.从总体上看 A:需要考虑到循环自身所占用的时间 ...