1. 程式人生 > >3.25發版之最後的搜索框

3.25發版之最後的搜索框

list 道理 bsp chan 字符串 chang 單詞 alt ima

說起搜索框 屬實是難受,做項目的時候交互體驗和需求沒有理清,後面改了好多,簡直頭皮發麻,老規矩先發一下代碼

技術分享圖片

這個keychange()函數是用來監聽搜索框輸入變化的,只要輸入變化,則函數激發

_debounce是防抖的 _trim 是用來去空格的 keyWord是傳入的輸入框的值 list是你需要遍歷的數組 searchTypeStatu是我用來控制其他的view的顯隱的 技術分享圖片

這個方法是用map函數遍歷數組,replace()函數

replace() 方法用於在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

/(\b\w)/g 這個是正則表達式 意思是在全局作用下取字符串每個單詞的首字母,然後用result拼接成字符串 eg:bei jing shi 效果:bjs 這是為了簡寫模糊搜索需求的 技術分享圖片

這個同樣的道理

item.pinyin.replace(/\s*/g, ‘‘) 這個正則表達式的功能是去空格 eg:qing dao shi 效果:qingdaoshi 這個是為了某些人全拼音搜索而做的

技術分享圖片

這個是為了某些人搜索首字母和漢字來的

這是上面搜索的效果圖

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

至於數據結構 我的上一篇裏說過了 這裏就不再說了

就這些了。。。。。。。哈哈哈哈

3.25發版之最後的搜索框