rd小組內(nèi)部自主開(kāi)發(fā)了一個(gè)后臺(tái)管理web系統(tǒng)片任，由于了解前端技術(shù)的rd少之又少，筆者也被安排去實(shí)現(xiàn)一個(gè)前端功能——下拉補(bǔ)全振愿。
指導(dǎo)人Cold Pine Crane給我說(shuō)明的時(shí)候，用了公司的開(kāi)發(fā)管理系統(tǒng)說(shuō)明的：
功能如下：
內(nèi)容框的尾部芽偏，為一個(gè)文本輸入框揽乱；
輸入部分連續(xù)的拼音名眉、漢字，可以匹配出包含輸入內(nèi)容的條目凰棉，彈出下拉提示损拢；
通過(guò)上、下撒犀、回車(chē)按鍵或鼠標(biāo)點(diǎn)擊福压，可以選擇提示條目；
選擇的條目插入到內(nèi)容框中或舞，位于文本輸入框之前荆姆；
已經(jīng)選取的條目可以使用鼠標(biāo)點(diǎn)擊條目后的“X”，進(jìn)行刪除映凳；
在文本輸入框編輯時(shí)胆筒，按退格鍵，可以刪除最后一個(gè)選取的條目诈豌。
最后為了方便其他同事使用腐泻，對(duì)使用的封裝，要求簡(jiǎn)單队询。使用方式如下：
由于本系統(tǒng)中派桩，只有地點(diǎn)、類別兩種下拉補(bǔ)全的使用場(chǎng)景蚌斩，因此只提供出這兩種控件（通過(guò)class指定）铆惑。
初始化過(guò)程（需要業(yè)務(wù)頁(yè)面使用$(document).ready(）調(diào)用）：
針對(duì)頁(yè)面中全部的地點(diǎn)、類別下拉補(bǔ)全div元素送膳，填充html员魏、添加各種事件回調(diào)（使用class區(qū)分）；
添加頁(yè)面空白處點(diǎn)擊調(diào)用函數(shù)叠聋，用于實(shí)現(xiàn)點(diǎn)擊空白撕阎，隱藏下拉提示；
分別異步獲取地點(diǎn)碌补、類別的全量數(shù)據(jù)虏束，作為全局變量，獲取完成后厦章，更新全部下拉補(bǔ)全控件（更新前镇匀，只顯示業(yè)務(wù)方添加的id；更新后袜啃，顯示名稱及id）汗侵；
業(yè)務(wù)方添加原有條目（打開(kāi)頁(yè)面后，直接要填充的），代碼見(jiàn)附件：
按調(diào)用時(shí)給定的id集晰韵，填充html到指定id的div中发乔，過(guò)程中按id去重；若地點(diǎn)或類別的全量數(shù)據(jù)異步獲取完畢雪猪，會(huì)將名稱一同填充到html栏尚。
業(yè)務(wù)方獲取當(dāng)前選取條目，代碼見(jiàn)附件：
按調(diào)用時(shí)給定的id浪蹂，遍歷其div下的元素抵栈，將其中的id拼接為結(jié)果集告材。
下拉補(bǔ)全控件坤次，填充html、添加事件：
填充提示框（默認(rèn)隱藏）斥赋，文本輸入框缰猴；
添加已選取條目，“X”符號(hào)點(diǎn)擊事件函數(shù)疤剑；
添加提示框條目滑绒，點(diǎn)擊事件函數(shù)；
添加按鍵按下事件函數(shù)：退格鍵 刪除最后一個(gè)選取條目隘膘；回車(chē) 選取提示框中處于選中的條目疑故，并隱藏提示框；
添加按鍵抬起事件函數(shù)：上弯菊、下按鍵 切換提示框中選中的條目纵势；空格、制表等按鍵 隱藏提示框管钳；其它按鍵 更新提示框內(nèi)容钦铁；
文本輸入框，焦點(diǎn)失去事件函數(shù)：清空文本輸入框內(nèi)容才漆。
