總結
之所以放前面是因為正文部分寫的比較亂。
做這個功能讓我想起剛畢業的一次面試問題，問題是“如何實現搜索功能”，當時的回答大概是根據關鍵字遍歷數據集然后提取匹配到記錄等等，反正現在想來回答是很水的。說這個的重點不是面試，而是想說說自己心態的改變。
畢業找工作：工作經驗？不存在的。道理我都懂，給我點時間我什么都能做。
現在：工作經驗？存在的。沒實際的寫過一些東西，不踩過一些坑，怎么可能成長起來。比如開發過這個搜索功能，有過權重的計算方式，知道自己還可以改進的地方，能夠更快更好的開發這個功能，哪怕需求有變動，掌握了原理的東西，就可以明月照大江。
這篇文章本來7月份就該寫了的，但是一直沒靜下心來。這兩個月工作任務倒是不重，主要空余時間放在鞏固基礎上了。
前端的東西確實比較多，H5、CSS3，ES6新增的東西到現在還沒都用一遍，這些也是現在前端的基礎吧，雖然有些用的少+瀏覽器兼容問題，但是知道總比不知道好很多。還有各種的框架、webApp要走的路還很長....
目前在干的事： node.js、webApp、vue.js、
nodejs從爬蟲上手的，目前爬了教學式的豆瓣電影、BOSS直聘的招聘信息、xiciIP的代理IP，也放在自己的github上面了，后面會寫關於爬蟲的東西。
另外...自己的寫作水平還需要提高啊，有些東西總感覺沒說清晰，有沒看懂的部分可以留下評論，我會認真回復的。
正文
先看UI的設計圖。
當然還有后續的功能，但是針對搜索框開發，所以就不談后續了。
首先說說主要的技術點和經驗，因為開發的時候先做的這個東西
1.關於原生select
由於原生select中，option只能修改部分樣式，不能完全達到圖中的效果，故果斷放棄，采用div+ul和絕對定位對其進行模擬。
2.歷史搜索記錄
要求：1.保存用戶搜索記錄；2.點擊空白狀態的文本框時顯示記錄；3.最多8條，排序以最近搜索為先；4.提供清除。
思路：
1.保存記錄--每次搜索一個正確數據之后，由於結構固定且有排序操作，采用數組searchHis存取，將該數組Stringify后存入localStorage.
2.點擊顯示--文本框綁定事件，在keywords為空的時候取出searchHis，再顯示到頁面中.
3.最多8條 有排序--屬於先進先出，典型的隊列操作，用數組的unshift實現頭部插入，然后判斷length>8?length=8:不變，length置8即把尾部多余的刪去.
4.提供清除--目前是做的清除所有，也就是localStorage.removeItem刪除。若是刪除指定某記錄，則先取出searchHis，然后刪除該條后重新放入localStorage
再來說踩過的坑，算是自己不夠仔細，
bug:由於localStorage是針對網站x存儲的，故同一瀏覽器登錄x的所有用戶都可以取出該記錄，相當於一台電腦上同一瀏覽器登錄的用戶共享一個記錄...
解決辦法：在命名時候針對當前登錄用戶做標識。
3.搜索匹配的權重計算+匹配字符添加樣式
這個功能打算單獨提出來再仔細說，先放權重計算的思路。
此搜索功能可根據輸入的漢字、拼音、代碼（英文+數字）、拼音首字母 對機場a[ ]、航司b[ ]進行查詢，相當於輸入英文要匹配3組數組，故中文可以直接匹配，所以權重計算針對英文。
在結果集優先顯示機場，然后航司，所以先匹配機場的數據源push到結果集，再匹配航司，可以解決優先顯示的問題。
匹配規則：拼音首字母>代碼>拼音，
一開始設計匹配方法的時候，直接匹配到了就提取，沒有加入權重計算，故每次匹配會被數據源a[],b[]本身的數組序列影響結果，
用機場數據舉例：
a[0]==={
qp: 'chengdushuangliu',
zn: '成都雙流',
code: 'CTU',
sp: 'CDSL'
}
a[99]==={
qp: 'hangzhouxiaoshan',
zn: '杭州蕭山',
code: 'HGH',
sp: 'HZXS'
}
這時候輸入H，則搜索結果中會這樣顯示：
chengdushuangliu...
hangzhouxiaoshan...
因為在遍歷的時候先從a[0]中找到了cheng，就push到結果集中進行a[1]匹配，這樣明顯與優先匹配拼音首字母要求不符合，先看看原來的代碼
if(vval.py.toLowerCase().indexOf(word)> -1 ){//拼音
return r.push(vval);
}
if(vval.code.toLowerCase().indexOf(word)> -1 ){//代碼
return r.push(vval);
}
if(vval.airportName.indexOf(word)> -1 ){//中文
return r.push(vval);
}
if(vval.pinyin.toLowerCase().indexOf(word)> -1 ){//
return r.push(vval);
}
解決思路：在外層添加一個counter，用於記錄匹配次數，然后根據匹配次數對數據集進行排序。在循環外層聲明一個二維數組nr[ [ ], [ ], [ ], [ ], [ ] ]，用於存放不同權重的結果。
新代碼：
let counter = 4; if(vval.py.toLowerCase().indexOf(word)> -1 ){ counter --; nr[counter].push(vval); } if(vval.code.toLowerCase().indexOf(word)> -1 ){ counter --; nr[counter].push(vval); } if(vval.airportName.indexOf(word)> -1 ){ counter --; nr[counter].push(vval); } if(vval.pinyin.toLowerCase().indexOf(word)> -1 ){ counter --; if(vval.pinyin.toLowerCase().indexOf(word) == 0){ //如果匹配到為拼音首字母則優先顯示 counter --; } nr[counter].push(vval); }
最后把nr[0-4]合並，就可以把權重高的放在前面了，這也是代表權重的counter為什么是--的原因。