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

前端工程师