html 文本框自动补全,自动补全（input处理）

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

相关方法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方法。这些就能解决之前的痛点了。下面先直接上代码，后面再解释为何这样做。

自动补全

*{

margin: 0;

padding: 0;

}

.clear:after{

content: '';

display: block;

width: 0;

height: 0;

clear: both;

}

body{

padding: 10px;

}

自动补全

日志：

$(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('

keyup 事件触发

')

}

});

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

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

如图：

1.png

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

如图：

2.png

参考