JS输入用户名自动显示邮箱后缀列表的方法

下面是JS输入用户名自动显示邮箱后缀列表的方法完整攻略:

标题

准备工作

要实现输入用户名自动显示邮箱后缀列表的方法,首先需要准备以下内容:

  • HTML页面中需要一个用户名输入框,一个邮箱后缀列表框;

  • JS脚本中需要一个邮箱后缀列表数组;

  • CSS样式表设置邮箱后缀列表框的位置样式。

在HTML中创建用户名输入框和邮箱列表框:

<input type="text" id="username" placeholder="请输入用户名">
<div id="email-list"></div>

在JS中创建邮箱后缀列表数组:

var emailSuffixList = ["@qq.com", "@163.com", "@126.com", "@gmail.com", "@yahoo.com", "@outlook.com", "@hotmail.com"];

设置CSS样式表的邮箱后缀列表框:

#email-list {
    position: absolute;
    top: 50px;
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #fff;
}

实现主体功能

  1. 监听用户名输入框的键盘事件;

  2. 获取用户名输入框的值;

  3. 根据输入值匹配邮箱后缀列表数组中的每一项,将匹配的项添加为一个li元素,并插入邮箱列表框中。

示例代码:

var username = document.getElementById('username');
var emailList = document.getElementById('email-list');
username.addEventListener('keyup', function() {
  emailList.innerHTML = '';  // 清空列表
  var value = this.value;
  var matchArr = emailSuffixList.filter(function(item) {
    return item.indexOf(value) !== -1;
  });
  matchArr.forEach(function(item) {
    var li = document.createElement('li');
    li.innerText = item;
    emailList.appendChild(li);
  });
});

完整代码

<html>
<head>
  <style>
    #email-list {
      position: absolute;
      top: 50px;
      max-height: 100px;
      overflow-y: auto;
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <input type="text" id="username" placeholder="请输入用户名">
  <div id="email-list"></div>
  <script>
    var emailSuffixList = ["@qq.com", "@163.com", "@126.com", "@gmail.com", "@yahoo.com", "@outlook.com", "@hotmail.com"];
    var username = document.getElementById('username');
    var emailList = document.getElementById('email-list');

    username.addEventListener('keyup', function() {
      emailList.innerHTML = '';
      var value = this.value;
      var matchArr = emailSuffixList.filter(function(item) {
        return item.indexOf(value) !== -1;
      });
      matchArr.forEach(function(item) {
        var li = document.createElement('li');
        li.innerText = item;
        emailList.appendChild(li);
      });
    });
  </script>
</body>
</html>

示例说明

示例1

当输入值为“@q”时,邮箱列表框自动显示“@qq.com”。

示例2

当输入值为“@”时,邮箱列表框自动显示所有邮箱后缀。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS输入用户名自动显示邮箱后缀列表的方法 - Python技术站

(0)
上一篇 2023年6月27日
下一篇 2023年6月27日

相关文章

  • delphi中tstringlist类常用属性方法详解

    Delphi中TStringList类常用属性方法详解 Delphi中的TStringList类是一个常用的字符串列表类,它封装了很多关于字符串列表的常用操作。在本文中,我们将详细介绍TStringList类的常用属性和方法,以便于在Delphi程序开发中灵活和高效地使用它。 属性 Capacity 该属性用于设置或获取TStringList对象的容量,即该…

    其他 2023年3月28日
    00
  • sql server——分组查询(方法和思想)

    SQL Server——分组查询(方法和思想) 在大多数业务场景下,我们需要按照特定的条件来对数据进行分组,以便我们能够更好地了解数据的结构、特征等信息。在 SQL Server 中,我们可以使用分组查询来帮助我们完成这一任务。 什么是分组查询? 分组查询是指根据一个或多个列的值将表中的数据分成多个组,并对每个组执行聚合函数。常见的聚合函数包括 COUNT、…

    其他 2023年3月28日
    00
  • 详解iOS开发中UIPickerView控件的使用方法

    详解iOS开发中UIPickerView控件的使用方法 简介 UIPickerView是iOS中常用的一种UI控件,用于显示一组可选的数据,并让用户从中选择一个。它通常是作为表单中的一部分,用于选择日期、时间、地址、性别等选项。本篇文章将详细介绍UIPickerView的使用方法。 基本用法 1. 创建UIPickerView对象 可以通过代码或xib/st…

    other 2023年6月20日
    00
  • nodejs使用redis作为缓存介质实现的封装缓存类示例

    接下来我将详细介绍使用Redis作为缓存介质实现封装缓存类的完整攻略,包括安装redis模块、编写缓存类以及使用示例。 安装Redis模块 首先需要在Node.js中安装与Redis交互的模块。可以使用npm命令来安装redis模块,命令如下: npm install redis –save 其中,–save参数表示将该模块添加到package.json…

    other 2023年6月25日
    00
  • 聊聊DecimalFormat的用法及各符号的意义

    DecimalFormat的用法及各符号的意义 DecimalFormat是Java中用于格式化数字的类。它提供了一种简单而灵活的方式来格式化数字,并允许我们指定数字的显示方式、小数位数、千位分隔符等。下面是对DecimalFormat的用法及各符号的意义的详细讲解。 1. DecimalFormat的基本用法 首先,我们需要导入java.text.Deci…

    other 2023年8月6日
    00
  • Nginx中泛域名配置的实例教程

    Nginx中泛域名配置的实例教程 在本教程中,我们将详细讲解如何在Nginx中配置泛域名。泛域名配置允许您使用通配符来匹配多个子域名,从而简化配置过程并提高灵活性。 步骤1:安装Nginx 首先,确保您已经在服务器上安装了Nginx。如果尚未安装,请按照以下步骤进行安装: 打开终端或命令提示符。 执行适用于您的操作系统的安装命令。例如,在Ubuntu上,您可…

    Nginx 2023年7月29日
    00
  • qt|菜鸟起飞简单教程

    Qt|菜鸟起飞简单教程 Qt是一个跨平台的C++应用程序开发框架,它可以用于开发桌面应用程序、移动应程序和嵌入式应用程序等。本教程介绍如何使用Qt开发应用程序,包括以下内容: 下载和安装Qt 创建Qt项目 编写Qt代码 编译和运行Qt项目 示例说明 1. 下载和安装Qt 首先,我们需要从Qt官网下载Qt的安装程序。下载完成双击安装程序按照提示安装。 2. 创…

    other 2023年5月7日
    00
  • powershell与cmd的异同汇总

    Powershell 与 CMD 的异同汇总 异同概述 CMD 是Windows操作系统默认的命令行工具,而 Powershell 是微软公司推出的新一代命令行工具; Powershell 与 CMD 相比有更强大的脚本语言支持; Powershell 工具界面更加美观、功能更加丰富,但是 CMD 工具的稳定性和兼容性更好。 界面和操作 CMD 操作简单,使…

    other 2023年6月26日
    00
合作推广
合作推广
分享本页
返回顶部