下拉補(bǔ)全——一位兼職前端的粗糙實(shí)現(xiàn)

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)單队询。使用方式如下:

控件使用說(shuō)明

由于本系統(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)容才漆。

以上代碼:http://pan.baidu.com/s/1hsPYI2K

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末牛曹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子醇滥,更是在濱河造成了極大的恐慌黎比,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸳玩,死亡現(xiàn)場(chǎng)離奇詭異焰手,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)怀喉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)书妻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事躲履〖洌” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵工猜,是天一觀的道長(zhǎng)米诉。 經(jīng)常有香客問(wèn)我,道長(zhǎng)篷帅,這世上最難降的妖魔是什么史侣? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮魏身,結(jié)果婚禮上惊橱,老公的妹妹穿的比我還像新娘。我一直安慰自己箭昵,他們只是感情好税朴,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著家制,像睡著了一般正林。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上颤殴,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天觅廓,我揣著相機(jī)與錄音,去河邊找鬼涵但。 笑死杈绸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贤笆。 我是一名探鬼主播蝇棉,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼芥永!你這毒婦竟也來(lái)了篡殷?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤埋涧,失蹤者是張志新(化名)和其女友劉穎板辽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體棘催,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡劲弦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了醇坝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邑跪。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出画畅,到底是詐尸還是另有隱情砸琅,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布轴踱,位于F島的核電站症脂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏淫僻。R本人自食惡果不足惜诱篷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雳灵。 院中可真熱鬧棕所,春花似錦、人聲如沸细办。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)笑撞。三九已至,卻和暖如春钓觉,著一層夾襖步出監(jiān)牢的瞬間茴肥,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工荡灾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瓤狐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓批幌,卻偏偏與公主長(zhǎng)得像础锐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荧缘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容