联想输入

最近遇到了一个小需求：根据输入模糊匹配，并快速选择。即联想输入，如下图效果：



抛开词库，分词等这些逻辑，只管前端实现，初步构思了以下思路：

1、监控输入变化事件：onkeyup或onchange；

2、匹配结果容器位置定位；

3、匹配结果容器显示隐藏；

4、匹配结果容器按键响应，方向键及enter：onkeydown；

5、输入内容截取并替换；

按照上面思路尝试demo，遇到第一个问题：onchange，在焦点失去输入区域时才会响应，并不会实时监控，因此需要变更为onkeyup或oninput（ie浏览器） onpropertychange（其他）。可以解决此问题；

接下来遇到的一个问题便是获取光标位置方法。普遍的offsetX等方法均为获取输入域dom元素的所在位置，然而根据输入内容多少动态计算着实不是解决问题的方案，查相关资料，倒是有相关的解决方案（selection），初步测试没成功，后来查到“at.js”插件，

初步试用了下，觉得这个插件就是为这种需求而开发，很不错，因此就没在自己弄下去了，在此记录下此插件，希望以后有类似需求时，拿来主义。

另外在查询过程中，遇到另外一种讨巧的解决方案，查找光标位置的思路如下：

1、放置一个与输入域相同大小的输入域，隐藏，下文称之备用输入域；

2、输入域输入内容时，备用输入域同步写入；

3、当输入锁定词时，在备选输入域中将该内容用标签（span）封装；

4、通过定位span的位置，再加上相对定位，即可算出输入光标的位置；

挺不错的，可见条条大路通罗马。再多的问题都不可怕，只要能静下心来分析问题，提供各种解决方案，淡定的选择并尝试，什么问题都会迎刃而解。