自动补全(input处理)

字数 890阅读 118

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

相关方法keyup、input、compositionstart 、compositionend

下面是相关方法的大致介绍:

  • keyup
    官方按键释放时触发。意味着:只要是键盘上相关操作都能被捕获。
    缺点:不支持鼠标复制粘贴的内容,因为这不属于按键操作。

  • input
    官方当value 被修改时,会触发 input 事件。它关注的是value变化,不关心你通过什么方式让它变化的。所以,它支持鼠标复制粘贴的内容。
    缺点:1. 支持IE9及以上的版本;2. input和compositionend的执行顺序,各大浏览器厂商不一样

  • compositionstart
    官方
    事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
    也就是:输入一段中文,按下第一个字母的时候触发

  • compositionend
    官方当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。
    也就是:输入一段中文,完成的时候触发

旧实现方式

在此之前,我基本都是用的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);
        }

新实现方式

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

<!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>

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

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

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

    如图:
    2.png

参考