Javascript 创建一个HTML输入文本元素，在输入回调时取消公告

我有一个JavaScript应用程序，用户可以在其中搜索地图上的位置。输入文本提供自动完成建议：当用户键入时，一些建议会显示在文本输入本身的底部

我使用的是一个第三方JavaScript自动完成库，它按用户请求收费。 不幸的是，每次击键都算作一个请求，因为库在从输入元素接收

onInput

回调时没有实现任何去抖动。因此，这些建议看起来很快，但要付出许多用户请求的代价

我想做的是在input元素中重新定义on-input回调来实现去抖动（比如500ms）

因为第三方库接受JavaScript元素本身，所以我不能使用外部去抖动机制：（可能库检测到输入元素本身发送的

onInput

消息）

var placesAutocomplete=places({
appId:'xxxxxxxxxx'，
阿皮奇：“kkkkkkkk”，
container:document.querySelector（“#inputelement”），//
使用官方文件，我制作了这个粗制滥造的版本：


var client=algoliasearch（“延迟”，“6BE0576FF61C053D5F9A3225 E2A90F76”）
var index=client.initIndex（'movies'）；
var myAutocomplete=自动完成（“#搜索输入”{
提示：错误
}, [{
来源：autocomplete.sources.hits（索引{
命中率：5
}),
displayKey:'标题'，
模板：{
建议：功能（建议）{
var sugTemplate=”“+建议。\u highlightResult.title.value+“”
返回模板；
}
}
}]).on（'autocomplete:selected'，函数（事件、建议、数据集）{
console.log（建议、数据集）；
});
document.querySelector（“.searchbox[type='reset']”）。addEventListener（“单击”，函数（）{
document.querySelector（“.aa输入”）.focus（）；
这个.classList.add（“隐藏”）；
myAutocomplete.autocomplete.setVal（“”）；
});
document.querySelector（“#debouncer”）.addEventListener（“输入”，函数（）{
var s=document.querySelector（“搜索输入”）；
s、 value=this.value；
clearTimeout（this.tick）；
this.tick=setTimeout（（）=>s.dispatchEvent（新键盘事件（“输入”），500）；
});
document.querySelector（“搜索输入”）.addEventListener（“输入”，函数（）{
var searchbox=document.querySelector（“.aa输入”）；
var reset=document.querySelector（“.searchbox[type='reset']”）；
if（searchbox.value.length==0）{
reset.classList.add（“隐藏”）；
}否则{
reset.classList.remove（'hide'）；
}
})；
正文{
填充：60px；
}
.搜索框{
显示：内联块；
位置：相对位置；
宽度：200px；
高度：37像素；
空白：nowrap；
框大小：边框框；
字体大小：13px；
字体系列：arial，无衬线；
}
#去抖器{
位置：绝对位置；
z指数：1；
框大小：边框框；
填充：0 30px 0 37px；
宽度：100%；
身高：100%；
垂直对齐：中间对齐；
空白：正常；
字体大小：继承；
-webkit外观：无；
-moz外观：无；
外观：无；
背景：无；
边界：0；
}
algolia自动完成{
显示：块；
身高：100%；
}
.searchbox\uuu包装{
宽度：100%；
身高：100%；
}
.searchbox\u输入{
显示：内联块；
-webkit过渡：盒子阴影。4s轻松，背景。4s轻松；
过渡：方块阴影。4s轻松，背景。4s轻松；
边界：0；
边界半径：19px；
框阴影：插入0 1px#D9D9D9；
颜色：透明；
背景：#FFFFFF；
填充：0；
右侧填充：30px；
左侧填充：37px；
宽度：100%；
身高：100%；
垂直对齐：中间对齐；
空白：正常；
字体大小：继承；
-webkit外观：无；
-moz外观：无；
外观：无；
}
.searchbox\uu输入：-webkit搜索装饰，
.searchbox\u输入：-webkit搜索取消按钮，
.searchbox_uu输入：：-webkit搜索结果按钮，
.searchbox\uu输入：-webkit搜索结果装饰{
显示：无；
}
#取消公告器：悬停~*.searchbox\uu输入{
盒影：镶嵌0 1px银色；
}
#去Bouncer:focus~*.searchbox\uuu输入，
#取消公告器：活动~*.searchbox\uuu输入{
大纲：0；
盒影：插入0 1px#4098CE；
背景：#FFFFFF；
}
#取消公告器：：-webkit输入占位符{
颜色：#AAAAA；
}
#去Bouncer:：-moz占位符{
颜色：#AAAAA；
}
#去Bouncer:-ms输入占位符{
颜色：#AAAAA；
}
#占位符{
颜色：#AAAAA；
}
.searchbox\u提交{
位置：绝对；z指数：2；
排名：0；
权利：继承；
左：0；
保证金：0；
边界：0；
边界半径：18px 0 0 18px；
背景色：rgba（255，255，255，0）；
填充：0；
宽度：37px；
身高：100%；
垂直对齐：中间对齐；
文本对齐：居中；
字体大小：继承；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.searchbox\uuu提交：：之前{
显示：内联块；
右边距：-4px；
身高：100%；
垂直对齐：中间对齐；
内容：''；
}
.searchbox\uuu提交：悬停，
.searchbox\u提交：活动{
光标：指针；
}
.searchbox\uuu提交：焦点{
大纲：0；
}
.searchbox\uuu提交svg{
宽度：17px；
高度：17px；
垂直对齐：中间对齐；
填充：#666666；
}
.searchbox\u重置{
位置：绝对；z指数：2；
顶部：8px；
右：8px；
保证金：0；
边界：0；
背景：无；
光标：指针；
填充：0；
字体大小：继承；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
填充：rgba（0,0,0,0.5）；
}
.searchbox\uuu reset.hide{
显示：无；
}
.搜索框\重置：焦点{
大纲：0；
}
.searchbox\uuu重置svg{
显示：块；
保证金：4倍；
宽度：13px；
高度：13px；
}
.searchbox\u输入：有效~.searchbox\u重置{
显示：块；
-webkit动画名称：sbx在中重置；
动画名称：sbx复位输入；
-webkit动画持续时间：.15s；
动画持续时间：.15s；
}
@-webkit关键帧sbx在中重置{
0% {
-webkit转换：translate3d（-20%，0，0）；
转换：translate3d（-20%，0，
var placesAutocomplete = places({
    appId: 'xxxxxxxxxxx',
    apiKey: 'kkkkkkkkkk',
    container: document.querySelector('#inputelement'), // <- the library accepts the element itself, not an "on input" listener (which could be easily debounced by an external function)
    language: G_lang
});

placesAutocomplete.on('change', function(res){
    // user leaves the input text, set lat lon on my map (code not shown here on SO)
    var lat = res.suggestion.latlng.lat;
    var lon = res.suggestion.latlng.lng;
    finish(lat, lon);
});