使用jquery实现邮箱名输入自动补全功能

声宏百世

已于 2022-05-06 16:22:16 修改

阅读量1.2k

点赞数

文章标签： jquery javascript 前端

于 2022-05-06 11:26:43 首次发布

本文链接：https://blog.csdn.net/a1029438413/article/details/124604362

版权

使用jquery实现邮箱名输入自动补全功能

1. 需求内容
实现输入邮箱名的时候弹框显示补全的常用的邮箱名，显示内容根据输入的完整度进行筛选

2. 实现思路
a. 实时监控输入框内容；
b. 根据输入框内容变动组织邮箱名补全，并弹框显示，弹框位置根据输入框位置进行确定；
c. 使用事件委托进行邮件点击选中

3. 实现代码
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="./autocomplete.js"></script>
    <title>Demo</title>
    <style>
    li {
      list-style: none;
    }
    li:hover {
      list-style: none;
      background-color: rgb(202, 197, 197);
      cursor: pointer;
    }
    </style>
</head>
<body>
    邮箱：<input type="text" id="email" />
</body>
<script>
$(document).ready(function() {
    let email = $("#email")
    let config = {
        value: '',
        maxHeight: '200px',
        isOverFlow: true,
        emailType: ["qq.com", "163.com", "163.net", "gmail.com", "yahoo.com", "aliyun.com", "139.com", "189.com", "126.com", "sohu.com", "sina.com", "sina.cn"]
    }
    $("#email").bind("input propertychange", function() {
        let emailVal = email.val()
        config.value = emailVal
        autocomplete(config, email)
    })
})
</script>
</html>

JS代码
此处将方法写在autocomplete.js中，然后在HTML中进行引入

function autocomplete(config, email) {
    let location = {
        top: email[0].offsetTop,
        left: email[0].offsetLeft,
        height: email[0].offsetHeight,
        width: email[0].offsetWidth
    }
    let emailVal = config.value
    if (emailVal && emailVal.length > 0) {
        // 初始化显示内容
        $('#emailTypeList').remove()
        let html = ''
        let showFlag = true
        // 根据配置判断是否固定弹框显示高度并内容滚动
        if (config.isOverFlow && config.isOverFlow === true) {
            html = "<ul id='emailTypeList' style='border:1px solid; padding-left:5px; position:absolute; overflow:auto; max-height:" + config.maxHeight + ";top:" + (location.top + location.height) + "px; left:" + location.left +"px; width:" + location.width + "px;'>"
        } else {
            html = "<ul id='emailTypeList' style='border:1px solid; padding-left:5px; position:absolute; top:" + (location.top + location.height) + "px; left:" + location.left +"px; width:" + location.width + "px;'>"
        }
        // 判断是否输入'@'符号
        if (emailVal.includes('@')) {
            let temp = emailVal.split('@')
            if (temp[1] === '') {
                for(let i=0; i<config.emailType.length; i++) {
                    html += "<li>" + emailVal + config.emailType[i] + "</li>"
                }
            } else {
                // 筛选与输入匹配的邮件后缀名
                let tempList = config.emailType.filter(item => {
                    return item.substring(0, temp[1].length) === temp[1]
                })
                if (tempList.length >0) {
                    for(let i=0; i<tempList.length; i++) {
                        html += "<li>" + temp[0] + '@' + tempList[i] + "</li>"
                    }
                } else {
                    // 不存在匹配的邮件后缀时不显示常用邮件弹框
                    showFlag = false
                }
            }
        } else {
            for(let i=0; i<config.emailType.length; i++) {
                html += "<li>" + emailVal + '@' + config.emailType[i] + "</li>"
            }
        }
        html += "</ul>"
        if (showFlag) {
            email.after(html)
        }
    } else {
        $('#emailTypeList').remove()
    }
    
    // 点击选择邮件
    $('#emailTypeList').on('click','li', function(){
        email.val($(this).text())
        $('#emailTypeList').remove()
    })
}

4. 实现效果
在这里插入图片描述

关于显示样式或其余功能可自行扩展

声宏百世

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用jquery实现邮箱名输入自动补全功能

使用jquery实现邮件自动补全输入功能1. 需求内容实现邮件输入的时候弹框显示并补全常用的邮箱，显示内容根据输入的完整度进行筛选2. 实现思路a. 实时监控输入框内容；b. 根据输入框内容变动组织邮件名补全，并弹框显示，弹框位置根据输入框位置进行确定；c. 使用事件委托进行邮件点击选中3. 实现代码HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫