自动补全（input处理）

自动补全，可能很多人都说三方的插件那么多，随便找个来用，改改就行，而实际上，有时候三方的自动补全插件很难满足你所面临的业务场景，这时候就需要你自己动手写了。其实思路不复杂，但是都会面临一些困难。兼容性，请求后台数据的次数等等。我搜集了相关资料，做了一些整理。

旧实现方式

在此之前，我基本都是用的keyup或input来做自动补全处理。需要兼容IE8就用的keyup，不需要的时候用的input。还大致用了一个判断IE版本，把两个方法糅合在一起使用。但是这两个方法都有个缺点，那就是输入中文时，会触发多次。因为中文输入时多字母录入，键盘上是属于多键触发。这就导致请求后台数据太频繁，虽然有了一个折中的方式，那就是延迟发送请求。但是这终究是治标不治本，体验也没那么好。
核心代码：

        var t;
        //搜索框--按键松开释放
        $(".auto-input").on("keyup", function(e) {
            autoLoadShowPnl($(this));
        });
        //自动补全--加载显示列表
        function autoLoadShowPnl(obj){
            var curVal = (obj.val()||'').trim();//输入值
            if(!curVal){
                return !1;
            }
            t && clearTimeout(t);
            t = setTimeout(function () {
                console.log(curVal);
                //todo 请求后台拿到数据
            },500);
        }

新实现方式

旧的实现方式，始终有个痛点没解决：发送请求的次数。然后发现了compositionstart和compositionend方法。这些就能解决之前的痛点了。下面先直接上代码，后面再解释为何这样做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>自动补全</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .clear:after{
            content: '';
            display: block;
            width: 0;
            height: 0;
            clear: both;
        }
        body{
            padding: 10px;
        }
    </style>
</head>
<body>
<h4>自动补全</h4>
<input type="text" id="input">
<div id="input_con"></div>
<div class="log">
    <p>日志：</p>
</div>
<script>
    $(function() {
        $('#input').on({
            keyup : function(e){
                $('.log').append(' keyup');
                var flag = e.target.isNeedPrevent;
                if(flag)  return;
                response() ;
                e.target.keyEvent = false ;

            },
            keydown : function(e){
                $('.log').append(' keydown');
                e.target.keyEvent = true ;
            },
            input : function(e){
                $('.log').append(' input');
                if(!e.target.keyEvent){
                    response()
                }
            },
            compositionstart : function(e){
                $('.log').append(' compositionstart');
                e.target.isNeedPrevent = true ;
            },
            compositionend : function(e){
                $('.log').append(' compositionend');
                e.target.isNeedPrevent = false;

            }
        });

        function response(){
            $('#input_con').append('<p>keyup 事件触发</p>')
        }

    });
</script>
</body>
</html>

从之前的方法介绍里面就能看出来：

keyup不支持鼠标粘贴的内容，input支持，所以，可以在input里发送请求。

如图：

1.png
input和compositionend在各个浏览器里的顺序不一样，所以在compositionend后做input处理。但是，compositionend之后一定会有keyup触发。所以，可以在keyup里发送请求。

如图：

2.png

自动补全（input处理）

自动补全（input处理）

相关方法keyup、input、compositionstart 、compositionend

旧实现方式

新实现方式

参考