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. cesium左侧列表定位目标

    cesium左侧列表定位目标 功能:根据左侧列表经纬度等信息的值,进行搜索定位. 列表: 1  点击清除按钮可以清空所有input的值 2  点击查找可以定位到位置,如果输入的值不在范围内,会有弹出框 ...

  2. export export-default import 使用场景

    export export-default import 使用场景:https://blog.csdn.net/weixin_36222137/article/details/77453774

  3. 马士兵对话京东T6阿里P7(薪水):月薪5万，他为何要离职？

    马士兵大佬你知道吗? 你竟然不知道?你怎么可能不知道!你不知道是不可能的! 记得自己的第一行Java代码,你的Hello World是跟着谁学的吗?我的就是马士兵老师! 马士兵是唯一一个在当时讲课是让 ...

  4. 关于禁止微信端webapp内部下拉出现QQ浏览器的问题

    <!DOCTYPE html> <html> <head> <title></title> </head> <style ...

  5. Unity应用怎么暂停（Pause）

    非常多时候,应用程序或者是游戏须要用上暂停功能,unity提供了不少便捷的方式,列在以下: 1.在editor中,按下pausebutton就可以暂停 2.假设在代码中控制,能够通过设置Time.ti ...

  6. ArcGis 创建Annotation注记要素类、添加注记要素 并加载到Activeview AO C#

    AO中一般有两种方式存储图面注记元素,一种使用TextElement,它是文档级的元素,编辑后要通过文档(mxd)保存:另一种是使用Annotation要素类,它是一个独立的要素类(featurecl ...

  7. Linux下svn更新含有中文名称的库无法更新问题

    Linux下更新含有中文名称的库文件时,出现如下提示: SVN Error: Can't convert string from native encoding to 'UTF-8' 通过google ...

  8. TreeMap和TreeSet在排序时如何比较元素，Collections工具类中的sort()方法如何比较元素

    TreeSet和TreeMap排序时比较元素要求元素对象必须实现Comparable接口 Collections的sort方法比较元素有两种方法: 元素对象实现Comparable接口 实体类Dog ...

  9. 配置ssh免密登录问题

    有小伙伴的系统需要做免密登录.配置比较简单,ssh-keygen然后生成authorized_keys 文件即可. 但是配置好之后,修改相应用户的家目录权限后,则免密登录就失效了. 经过试验,发现家目 ...

  10. 【datatable】正在加载中的信息提示

    datatable插件 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, ...