自动补全，可能很多人都说三方的插件那么多，随便找个来用，改改就行，而实际上，有时候三方的自动补全插件很难满足你所面临的业务场景，这时候就需要你自己动手写了。其实思路不复杂，但是都会面临一些困难。兼容性，请求后台数据的次数等等。我搜集了相关资料，做了一些整理。
相关方法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);
}
新实现方式
旧的实现方式，始终有个痛点没解决：发送请求的次数。然后发现了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
网友评论