Yukun的blog

javascript自动填充插件

自己写的一个插件，效果见下图

效果图

特点是多行文本中可以正确定位，可以同时检索不同的格式。就跟腾讯微博的效果差不多，不过他们的js压缩了，没看出来是不是用同样的方法定位的。
因为是第一次做这种插件，很多问题都是第一次遇到，在这里总结一下，一些工具函数也单独写出来给大家做个参考。

界面需要一个textarea输入框，隐藏的shadow层，选择面板。

工作流程【todo：流程图】

结构图：

  1. 绑定事件
    绑定onkeydown事件：如果选择面板正在显示，屏蔽up,down,enter,tab键的默认行为。
    绑定onkeyup事件：
    1.1，如果选择面板显示，UP选中条目上移，DOWN选中条目下移，RETURN,TAB插入结果及后续处理（关闭选择面板等【hide()】）其它键触发主逻辑；
    1.2，如果选择面板没有显示，所有按键触发主逻辑【暂时命名search】。
  2. search功能
    2.1、如果文本框内有@符号：获取待选姓名列表，获取光标在行中位置，获得@后面的字符，显示选择面板【暂定名showSelecterLayer】。
    2.2、如果文本框内没有@符号，或者有@符号但是后面没有符合规则的字符，关闭选择面板及其他清理工作。【hide()】
  3. showSelecterLayer 功能
    3.1、填充内容到shadow层
    3.2、获取光标x,y坐标
    3.3、
    3.3.1，如果有备选项：显示选择面板（显示备选结果，默认选中第一个，绑定事件）；
    3.3.2，如果备选项没有加载成功或者不存在：关闭选择面板并进行清理【hide()】

工具函数

  1. cursorX(pos)：【暂定：setCursorX】获取或设置光标在文本框行中的位置。
  2. fetchNameList：获取备选项数据，如果本地不存在异步请求获取。
  3. fillShadow：把当前获取的姓名用<span>标签包裹，然后把文本框中的内容赋值给隐藏的shadow层。
  4. resultPosition：【暂定：setResultPosition】根据shadow层中span的位置计算出选择面板出现的位置。
  5. resultStr：【暂定：setResultStr】从Name List搜索符合用户输入的名字，组合成ul li <b>输入的字符</b> 的格式，设置选择默认结果为第一个选项。
  6. bindHover：绑定选择面板的鼠标经过事件，鼠标点击事件。
  7. escapeReg：setResultStr 用到的工具函数，用户的输入拼成正则表达式之前处理特殊字符。
  8. hide：关闭选择面板。
  9. stopDefault：阻止事件的默认行为。

待续……【todo 抄代码，找个代码高亮插件】

加油

document.write('找到了，这么快！')

 

Yukun

,