最近遇到了一个小需求:根据输入模糊匹配,并快速选择。即联想输入,如下图效果:
抛开词库,分词等这些逻辑,只管前端实现,初步构思了以下思路:
1、监控输入变化事件:onkeyup或onchange;
2、匹配结果容器位置定位;
3、匹配结果容器显示隐藏;
4、匹配结果容器按键响应,方向键及enter:onkeydown;
5、输入内容截取并替换;
按照上面思路尝试demo,遇到第一个问题:onchange,在焦点失去输入区域时才会响应,并不会实时监控,因此需要变更为onkeyup或oninput(ie浏览器)