序

前段时间发了一个编辑器插件。忙完之后又详细测试了一遍，然后在心里说：“这么精彩的插件是谁写的？”根本没有什么六安用！"

该怎么做才能让自己不满意？男人不怕累，花时间改写(赞美世界上所有像我一样勤劳的男人)~

思维导图

在萧声看来，在开发每一个新功能时，都应该有一个思维导图：功能实现的逻辑和实现功能的近似方法。当然，我们以前不可能做到

我之前什么都考虑过，但是在正式开发之前对整个流程有一个清晰的印象，肯定会让我们开始工作的时候更加顺畅(喝娃哈哈，看图~):

流动效果图

触发检索事件的特征可以定制。默认值为$。输入$以触发检索显示。此时，检索值为空，因此显示所有选项。继续输入A，检索值为A，显示匹配选项。什么时候？重新输入时，检索值获取条件会发生变化(我们将在后面查看代码以了解详细信息)。

图4显示了控制台中整个过程的记录。

Js代码监控输入框

全局变量

考虑到里面有很多小方法，为了简化代码，我这里选择模块化，需要用到以下全局变量。这里特别提到：持续事件和点事件的区别。顾名思义，持久事件就是一直被触发的事件。这里，在检索事件被触发之后，检索值selectVal被检索

它在变化，但我们不需要它一直被触发。我们做什么呢是的，开关，我们可以为这个事件设置一个开关。当条件满足时，开关将打开，事件将持续触发。结束后，开关将关闭，以结束检索事件。这里设置的开关是：searchStart；和点事件

以下是事件触发的时间。已输入。它只需要在。输入，不需要连续触发。这里我们设置参数enterCharacter:当前输入的字符。

var _ this=$(this)；var e=event | | window.event//键值兼容性var searchStart=false//设置检索事件开关var checkCharacter=false//输入字符检索开关var oldCurrentPos=//检索值开始的位置var currentPos=//检索值结束的位置var selectVal=//检索值var pos=//设置光标位置var enterCharacter=//当前输入的字符var dotVal//输入从0到当前光标位置的文本var dotDollerPos//获取最接近的$下标。以及输入引文时的检索值。即dotSelectVal不包含$本身，所以需要添加1个var dotSelectVal//输入时插入检索到的值。进入输入框

先插入下拉框，当然以后可以插入(你很高兴你说的都是对的)，但是这里有一点需要注意：为什么选择插入到身体下面？因为我们得到的下拉框的位置是绝对定位坐标。

//插入下拉框_ this。drop down=$(' ul class=' edit tips ' style=' display : none；/ul ')；//得到的弹出下拉框的位置是绝对定位坐标，所以你要把弹出层放在$('body ')里面。在(_this.dropdown)之后；_ this . drop down . CSS({ ' width ' : opts . drop down width，' position':'absolute '，})；_ this . CSS({ ' position ' : ' relative '，})；注意：这里我们提到，要获取检索值，即selectVal，需要知道事件触发时光标在哪里，即oldCurrentPos，以及当前光标位置CurrentPos。有了这两个下标，我们可以动态地获取selectVal。

获取当前光标位置

关于获取输入框光标和获取数值的方法，不懂的朋友可以看看range方法。当然，无数前辈做过无数归纳总结解释(致敬前辈~):

//获取当前光标位置当前PoS var GetStart=function(){ var all _ range=' '；if(导航器。用户代理。indexof(' MSIE ')-1){//IE if(_ this)。get(0)).标记名==' TEXARea '){//根据身体创建文本范围