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. 微信小程序 Page构造函数重写

    //utils/utils.js const oldPage = Page; console.log(oldPage) Page = function (app) { //定义新函数 app.newS ...

  2. JAVA中一个汉字占多少个字符（转载）

    1.先说重点: 不同的编码格式占字节数是不同的,UTF-8编码下一个中文所占字节也是不确定的,可能是2个.3个.4个字节: 2.以下是源码: 1 @Test 2 public void test1() ...

  3. SpringBoot扫描不到类，注入失败A component required a bean of type 'XXService' that could...

    SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! “Application类”是指SpringBoot项目入口类.这个类的位置很关键: 如果App ...

  4. php &引用符的注意情况

  5. grafana初体验

    1.centos版下载安装 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.0.4-1.x86_6 ...

  6. sql 查询库是否存在

    网上查了很多,但是都是不完整的,很多坑,后面终于摸索出来了:DROP DATABASE IF EXISTS 库名(不要加引号); 这句话的意思就是如果库存在,就删除库,然后再新建库就行了.

  7. windows server 2016 支持多用户远程登录

    服务器设置多用户同时远程桌面,可以提高访问效率,避免人多抢登服务器. 1. 首先需要先安装远程桌面服务  配置组策略,运行框输入gpedit.msc,打开计算机配置–>管理模板—>wind ...

  8. 单核cpu实现多任务原理

  9. spring security学习总结

    这几天一直在学习spring security的相关知识.逛各大论坛,看相关api与教学视频,获益良多! 简介 Spring Security是为基于Spring的企业应用系统提供声明式的安全访问控制 ...

  10. spring.xml及注解

    spring.xml配置文件中配置注解: 开启注解(及自动扫描包中bean): 1:<context:component-scan base-package="com.bzu" ...