rd小组内部自主开发了一个后台管理web系统，由于了解前端技术的rd少之又少，笔者也被安排去实现一个前端功能——下拉补全。
最终效果
指导人Cold Pine Crane给我说明的时候，用了公司的开发管理系统说明的：
功能如下：
内容框的尾部，为一个文本输入框；
输入部分连续的拼音、汉字，可以匹配出包含输入内容的条目，弹出下拉提示；
通过上、下、回车按键或鼠标点击，可以选择提示条目；
选择的条目插入到内容框中，位于文本输入框之前；
已经选取的条目可以使用鼠标点击条目后的“X”，进行删除；
在文本输入框编辑时，按退格键，可以删除最后一个选取的条目。
最后为了方便其他同事使用，对使用的封装，要求简单。使用方式如下：
控件使用说明
由于本系统中，只有地点、类别两种下拉补全的使用场景，因此只提供出这两种控件（通过class指定）。
初始化过程（需要业务页面使用$(document).ready(）调用）：
初始化
针对页面中全部的地点、类别下拉补全div元素，填充html、添加各种事件回调（使用class区分）；
添加页面空白处点击调用函数，用于实现点击空白，隐藏下拉提示；
分别异步获取地点、类别的全量数据，作为全局变量，获取完成后，更新全部下拉补全控件（更新前，只显示业务方添加的id；更新后，显示名称及id）；
业务方添加原有条目（打开页面后，直接要填充的），代码见附件：
按调用时给定的id集，填充html到指定id的div中，过程中按id去重；若地点或类别的全量数据异步获取完毕，会将名称一同填充到html。
业务方获取当前选取条目，代码见附件：
按调用时给定的id，遍历其div下的元素，将其中的id拼接为结果集。
下拉补全控件，填充html、添加事件：
填充提示框（默认隐藏），文本输入框；
添加已选取条目，“X”符号点击事件函数；
添加提示框条目，点击事件函数；
添加按键按下事件函数：退格键 删除最后一个选取条目；回车 选取提示框中处于选中的条目，并隐藏提示框；
添加按键抬起事件函数：上、下按键 切换提示框中选中的条目；空格、制表等按键 隐藏提示框；其它按键 更新提示框内容；
文本输入框，焦点失去事件函数：清空文本输入框内容。
网友评论