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. Linux下tomcat启动慢，阻塞

    声明:本文为转载,请尊重版权,原文地址: https://www.cnblogs.com/songjinju/p/7505564.html 这两天在linux部署完tomcat以后,发现每次启动都非常 ...

  2. appium 环境搭建（不推荐安装此版本appium，推荐安装appium desktop）

    一:安装node.js 1.双击这个软件 2.一键安装,全都下一步,不要私自更改安装路径 3.打开cmd,输入npm,出现如下截图表示成功 二:安装appium 1.双击appium-installe ...

  3. ACM 中的对拍程序

    所谓对拍,就是随机生成数据,然后用一个肯定正确的暴力算法的程序,去测试一个要提交的程序. 由于比赛中一般使用 Linux 系统,所以本篇博客的代码都是 Linux 下的程序代码. 其实最简单的方式是写 ...

  4. PAT_A1037#Magic Coupon

    Source: PAT A1037 Magic Coupon (25 分) Description: The magic shop in Mars is offering some magic cou ...

  5. ajax请求 Provisional headers are show

    请求被阻塞就会导致Provisional headers are show 我的原因是因为数据库 修改操作未提交导致表 锁住 . 后台操作该表超时

  6. Eclipse国内下载升级方法

    Eclipse国内下载升级方法 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} ...

  7. CentOS6.5源码安装MySQL5.6.35

    CentOS6.5源码安装MySQL5.6.35 一.卸载旧版本 1.使用下面的命令检查是否安装有mysql [root@localhost tools]# rpm -qa|grep -i mysql ...

  8. redis 入门之string

    set  用法 #set key value 设置value为字符串的键值对redis> SET key "value" #对不存在的key设置value OK redis& ...

  9. PHP 工厂模式浅析

    //抽象出一个人的接口interface Person{ public function showInfo();}//继承于人的学生类class Student implements Person{ ...

  10. makefile自动编译

    1.格式:  目标:依赖 规则    规则前有一个tab键 ,缺少tab键出错,使用空格替代也不可以 (1). 例子: 编写makefile 编译 main.c ,fun.c , fun.h test ...