最近項目當中遇到一個需求要求實現(xiàn)輸入的內(nèi)容带污，如果接口返回的結(jié)果有關鍵字，則輸入的關鍵字高亮展示痕钢；實現(xiàn)出來感覺還是蠻簡單的一個功能點图柏，現(xiàn)記錄下來分享給需要的同學。
1:監(jiān)聽輸入框：比較好的做法是對輸入事件做防抖處理任连，作防抖的好處這里就不做闡述了蚤吹，不理解的同學可以自行百度學習。因為搜索內(nèi)容還要實時和后臺接口交互随抠，輸入字母或者漢字都要請求接口裁着，返回數(shù)據(jù)會給到前端，這時候我們需要根據(jù)后臺返回的內(nèi)容作字符處理拱她。
比如返回的是：arrList:[{arr:"融新科技A座"二驰，address:"北京市朝陽區(qū)融新科技大廈A座"}，{arr:"B座融新科技"椭懊，address:"北京市朝陽區(qū)融新科技大廈B座"}诸蚕，{arr:"C座融"步势，address:"北京市朝陽區(qū)融新科技大廈B座"}]；
則我們處理字符就好：核心就是使用string的一個split方法
先map或者for循環(huán)后臺返回的數(shù)組背犯，遍歷里面的對象坏瘩，將arr字符串變?yōu)閿?shù)組格式；
arr.split('輸入框輸入的關鍵字')
比如我輸入的關鍵字是：融漠魏，則分割結(jié)果分別是：['','新科技A座']倔矾，['B座','新科技']，['C座','']
總結(jié)就是如果關鍵字在字符第一位柱锹，則數(shù)組【0】是空哪自，如果關鍵字是字符最后一個則數(shù)組【length-1】為空，中間的話就分割出來禁熏，這樣就根據(jù)關鍵字將字符串重新分組
2:將處理好的數(shù)組重新組合放到頁面上展示出來：
外層寫一個for循環(huán)去遍歷這個arr
arr[0]?arr[0]:''+arr[i]+i===arr.length-1?'':'輸入的關鍵字'
樣式就不在這里單獨寫了壤巷，根據(jù)自己ui展示去寫就好了
