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)容才漆。