How to implement email prompt completion function in JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement email prompt completion function in JS

亚连

Jun 08, 2018 pm 05:46 PM

js Mail

This article mainly introduces the email prompt completion effect implemented by JS, involving techniques related to javascript regular matching, event response and dynamic operation of page elements. Friends in need can refer to the following

The examples of this article describe JS Implemented email prompt completion effect. Share it with everyone for your reference, the details are as follows:

What I want to achieve now is an effect similar to the email prompt box when logging in to NetEase, but I plan to change it slightly here, that is, the email prompt will appear when entering @ List

The principle of implementing prompts is to use regular rules for matching

The effect diagram is as follows:

The code is as follows:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>邮箱补全提示</title>
  <style>
    ul{padding:0px;margin:0px;}
    .login_autoComplete{width:256px;border:1px solid #4190db;position:absolute;background-color:#ffffff;z-index:99;top:109px;left:40px;display:none}
    .login_auto_ul em{font-style:normal}
    .login_auto_ul li.login_auto_title{font-weight:normal;line-height:30px;}
    .login_auto_ul li{line-height:22px;text-indent:5px;font-family:"Arial";cursor:pointer;font-weight:bold;color:#333}
    .login_auto_ul li.hover,.login_auto_ul li.curr{color:#ffffff;background-color:#6eb6fe}
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    window.email_auto = function(selector){
      var elt = $(selector);
      var strHtml = &#39;<p class="login_autoComplete" id="login_autoComplete">&#39;+
            &#39;    <ul class="login_auto_ul">&#39;+
            &#39;      <li class="login_auto_title">请选择邮箱后缀</li>&#39;+
            &#39;      <li class="hover" hz="@qq.com"></li>&#39;+
            &#39;      <li hz="@163.com"></li>&#39;+
            &#39;      <li hz="@126.com"></li>&#39;+
            &#39;      <li hz="@yahoo.com"></li>&#39;+
            &#39;      <li hz="@sina.com"></li>&#39;+
            &#39;      <li hz="@21cn.com"></li>&#39;+
            &#39;    </ul>&#39;+
            &#39;  </p>&#39;;
      var lc = "#login_autoComplete";
      var autoComplete,autoLi;
      if($(lc).length==0){
        $("body").append(strHtml);
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
        autoLi.mouseover(function(){
          $(this).siblings().filter(".hover").removeClass("hover");
          $(this).addClass("hover");
        }).mouseout(function(){
          $(this).removeClass("hover");
        }).mousedown(function(){
          $(lc).data("elt").val($(this).text()).change();
          $(this).parent().parent().hide();
        });
      }else{
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
      }
      $(lc).css("width",elt.outerWidth()-1);
      //用户名补全+翻动
      elt.keyup(function(e){
        if(/13|38|40|116/.test(e.keyCode) || this.value==&#39;&#39;){
          return false;
        }
        var username = this.value;
        if(username.indexOf("@")==-1){
          autoComplete.hide();
          return false;
        }
        autoLi.each(function(){
          this.innerHTML = username.replace(/\@+.*/,"")+$(this).attr("hz");
          if(this.innerHTML.indexOf(username)>=0){
            $(this).show();
          }else{
            $(this).hide();
          }
        }).filter(".hover").removeClass("hover");
        autoComplete.show().css({
          left : $(this).offset().left,
          top : $(this).offset().top + $(this).outerHeight(true) - 1
        });
        if(autoLi.filter(":visible").length==0){
          autoComplete.hide();
        }else{
          autoLi.filter(":visible").eq(0).addClass("hover");
        }
      }).change(function(){
        $("#login_autoComplete").hide();
      }).keydown(function(e){
        if(e.keyCode==38){ //上
          autoLi.filter(".hover").prev().not(".login_auto_title").addClass("hover").next().removeClass("hover");
        }else if(e.keyCode==40){ //下
          autoLi.filter(".hover").next().addClass("hover").prev().removeClass("hover");
        }else if(e.keyCode==13){ //Enter
          autoLi.filter(".hover").mousedown();
        }
      }).focus(function(){
        $("#login_autoComplete").data("elt",$(this));
      });
    }
    $(function(){
      email_auto("#xxx");
    });
  </script>
</head>
<body>
脚本之家测试：邮箱补全提示<br/>
<input type="text" id="xxx" style="width:300px"/>
</body>
</html>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to solve the problem of invalid static resource images after vue packaging

Set background images in Vue

How to use vue less to implement simple skin change function

The above is the detailed content of How to implement email prompt completion function in JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Clair Obscur: Expedition 33 UE-Sandfall Game Crash? 3 Ways!

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1677

CakePHP Tutorial

1431

Laravel Tutorial

1334

PHP Tutorial

1279

C# Tutorial

1257

Related knowledge

How to register in the ok exchange in China? ok trading platform registration and use guide for beginners in mainland China May 08, 2025 pm 10:51 PM

In the cryptocurrency market, choosing a reliable trading platform is crucial. As a world-renowned digital asset exchange, the OK trading platform has attracted a large number of novice users in mainland China. This guide will introduce in detail how to register and use it on the OK trading platform to help novice users get started quickly.

2025 Binance Binance Exchange Latest Login Portal May 07, 2025 pm 07:03 PM

As the world's leading cryptocurrency exchange, Binance is always committed to providing users with a safe and convenient trading experience. Over time, Binance has continuously optimized its platform features and user interface to meet the changing needs of users. In 2025, Binance launched a new login portal aimed at further improving the user experience.

The latest entrance address of Binance Exchange in 2025 May 07, 2025 pm 07:00 PM

2025 Binance Online Web Address May 07, 2025 pm 06:54 PM

Does Binance have a mobile app? Binance binance official website mobile version Android APP recommendation May 08, 2025 pm 10:12 PM

Binance, as the world's leading cryptocurrency trading platform, provides a variety of ways for users to trade and manage assets easily. Among them, Binance Mobile APP is one of the tools chosen by many users. The following details the download and use of Binance's official Android APP.

When buying U coins in 2025, don't miss these reliable exchanges! May 08, 2025 pm 08:15 PM

In 2025, if you plan to buy U coins, it is crucial to choose a reliable exchange. The following exchanges are highly respected for their security, liquidity and user experience, so don't miss them.

Detailed Guide to Installation and Registration of Binance Binance Exchange (2025 Latest Steps) May 08, 2025 pm 11:06 PM

Binance is one of the world's leading cryptocurrency trading platforms, providing trading services for a variety of digital assets. If you are considering using Binance for cryptocurrency trading, this article will provide you with a detailed installation and registration guide.

Ouyi ios official website entrance okx Ouyi official website Apple mobile phone registration entrance May 08, 2025 pm 11:09 PM

If you are an Apple mobile phone user and are interested in cryptocurrency trading, then you must not miss the OKX Ouyi platform. As one of the world's leading cryptocurrency exchanges, OKX Ouyi provides trading services for a variety of digital assets, covering mainstream currencies such as Bitcoin, Ethereum, Litecoin, etc., and also supports the transaction of a variety of altcoins and emerging tokens. Whether you are a freshly-made investor or an experienced trader, OKX Ouyi can meet your needs. Below we will introduce in detail how to note on the official website of OKX Ouyi through Apple mobile phones

See all articles