直接上效果

逻辑

html部分，一个input框，一个用来放提示内容的ul标签。

<label value="Your Email" class="emailPosition place_text-max">
    <ul class="emailSuggestions"></ul>
    <input type="email" placeholder="" class="email emailInput" autocomplete="off">
</label>

css部分，设置提示内容的显示样式，以及位置

 .emailPosition {
        position: relative;
    }
 
.emailSuggestions {
    position: absolute;
    z-index: 1;
    background: #ffffff;
    width: 100%;
    left: 0;
    top: 50px;
    height: 300px;
    overflow: auto;
    border: 1px solid #DDDDDD;
    display: none;
}

.emailSuggestions li {
    padding: 7px 10px;
}

.emailSuggestions li:hover {
    cursor: pointer;
    background-color: #660099;
    color: #ffffff;
}

js部分，创建一个后缀数组

 var emailSuffixes = [
    "gmail.com",
    "icloud.com",
    "outlook.com",
    "outlook.jp",
    "hotmail.com",
    "yahoo.com",
    "yahoo.com.cn",
    "live.com",
    "sohu.com",
    "sina.cn",
    "sina.com",
    "aol.com",
    "126.com",
    "139.com",
    "yandex.com",
    "zoho.com",
    "mail.com",
    "mail.ru",
    "protonmail.com",
    "gmx.com"
];

设置邮箱输入框的输入事件，判断如果输入框为空，隐藏提示列表，反之显示

$(".emailInput").on("input", function () {
    var inputText = $(this).val();
    var suggestions = [];
    //console.log(inputText)
    if (inputText == "") {
        $(this).siblings("#emailSuggestions").hide();
    } else {
      //显示逻辑
      displaySuggestions(suggestions, $(this).siblings(".emailSuggestions"));
    }
});

对输入内容进行处理，如果输入中包含'@'，则根据 '@' 将内容分为前缀和后缀，并筛选匹配的邮箱后缀进行补全；否则，将所有后缀与输入内容拼接。

if (inputText.includes("@")) { ... } else { ... }

监听提示内容点击事件，并进行赋值

$(".emailSuggestions").on("click", "li", function () {
    var selectedEmail = $(this).text();
    //console.log(selectedEmail)
    $(this).parents().siblings(".emailInput").val(selectedEmail);
    $(this).parents().siblings(".emailInput").attr('value', selectedEmail);
    $(this).parents(".emailSuggestions").hide();
});

点击页面其他地方隐藏提示内容列表

$(document).on("click", function (event) {
    if (
        !$(event.target).closest(".emailSuggestions").length &&
        !$(event.target).is(".emailInput")
    ) {
        $(".emailSuggestions").hide();
    }
});

提示内容显示函数

function displaySuggestions(suggestions, $html) {
    $html.empty();
    suggestions.forEach(function (suggestion) {
        var listItem = $("<li>").text(suggestion);
        $html.append(listItem);
    });
    $html.show();
}

完整js代码

$(document).ready(function () {
        // 邮箱后缀列表
        var emailSuffixes = [
            "gmail.com",
            "icloud.com",
            "outlook.com",
            "outlook.jp",
            "hotmail.com",
            "yahoo.com",
            "yahoo.com.cn",
            "live.com",
            "sohu.com",
            "sina.cn",
            "sina.com",
            "aol.com",
            "126.com",
            "139.com",
            "yandex.com",
            "zoho.com",
            "mail.com",
            "mail.ru",
            "protonmail.com",
            "gmx.com"
        ];
        $(".emailInput").on("input", function () {
            var inputText = $(this).val();
            var suggestions = [];
            //console.log(inputText)
            if (inputText == "") {
                $(this).siblings("#emailSuggestions").hide();
            } else {
    
                if (inputText.includes("@")) {
                    var prefix = inputText.split("@")[0];
                    var suffix = inputText.split("@")[1];
    
                    suggestions = emailSuffixes
                        .filter(function (suffix) {
                            return suffix.startsWith(suffix);
                        })
                        .map(function (suffix) {
                            return prefix + "@" + suffix;
                        });
                } else {
                    suggestions = emailSuffixes.map(function (suffix) {
                        return inputText + "@" + suffix;
                    });
                }
                displaySuggestions(suggestions, $(this).siblings(".emailSuggestions"));
            }
    
        });
        $(".emailSuggestions").on("click", "li", function () {
            var selectedEmail = $(this).text();
            //console.log(selectedEmail)
            $(this).parents().siblings(".emailInput").val(selectedEmail);
            $(this).parents().siblings(".emailInput").attr('value', selectedEmail);
            $(this).parents(".emailSuggestions").hide();
        });
    
        $(document).on("click", function (event) {
            if (
                !$(event.target).closest(".emailSuggestions").length &&
                !$(event.target).is(".emailInput")
            ) {
                $(".emailSuggestions").hide();
            }
        });
    });
    function displaySuggestions(suggestions, $html) {
        $html.empty();
        suggestions.forEach(function (suggestion) {
            var listItem = $("<li>").text(suggestion);
            $html.append(listItem);
        });
        $html.show();
    }