Chrome插件篇
藝龍有一個(gè)槽點(diǎn)：切換酒店曾我，為什么2步可以完成的操作蜕青，藝龍卻要我們走4步捅厂。新舊版本都一樣缭裆，以舊版為例：
搜索酒店步驟<i>1.點(diǎn)擊“設(shè)置當(dāng)前酒店”->2.在搜索框輸入關(guān)鍵詞->3.點(diǎn)擊搜索按鈕->4.點(diǎn)擊超鏈陈莽，跳到對(duì)應(yīng)酒店的頁面</i>
代替步驟：<i>1.在搜索框輸入關(guān)鍵詞->2.點(diǎn)擊超鏈跳到對(duì)應(yīng)的酒店頁面</i>
跳轉(zhuǎn)邏輯
我們需要先來看看原來的步驟是怎樣跳轉(zhuǎn)到對(duì)應(yīng)酒店的渤昌。
分析頁面代碼(用審查元素功能)可以看到，設(shè)置當(dāng)前酒店的頁面是把本賬號(hào)的所有的酒店名單都拿回來了走搁。在搜索框輸入關(guān)鍵字和點(diǎn)擊搜索按鈕就是幫我們篩選出含有關(guān)鍵詞的酒店的過程独柑。點(diǎn)擊對(duì)應(yīng)的酒店，就是點(diǎn)擊一個(gè)超鏈接而已私植。
實(shí)現(xiàn)邏輯
第一步
分析http://eb.elong.com/CurrentHotels.aspx 酒店名單數(shù)據(jù)元素忌栅，寫入localStorage 。需要的時(shí)候讀取。我們可以用酒店名稱作為鍵名(key)索绪，鏈接地址作為鍵值(value)湖员。提供一個(gè)按鈕，進(jìn)行這些操作瑞驱。效果如圖娘摔。
第二步
搜索框移位。把原本在 http://eb.elong.com/CurrentHotels.aspx 頁面的搜索框唤反，放到每個(gè)頁面的右上角凳寺。在簡(jiǎn)繁體中文切換的旁邊。這樣一來就不用每次都跳到搜索酒店的頁面了彤侍。代碼如下肠缨，效果如圖。
第三步
輸入框綁定oninput事件盏阶，輸入框值有變化的時(shí)候晒奕，馬上就可以執(zhí)行搜索，并且同時(shí)給出符合關(guān)鍵字酒店列表
第四步
點(diǎn)擊對(duì)應(yīng)的列表項(xiàng)名斟，就可以跳轉(zhuǎn)到相應(yīng)的酒店頁面。
寫在結(jié)尾
雖然這個(gè)變動(dòng)不算很大蒸眠。但是當(dāng)你需要頻繁使用這個(gè)功能的時(shí)候漾橙。就能體會(huì)到帶來多大的便利性。
如果有幫到你楞卡，給我點(diǎn)個(gè)贊啦 (^_-)
詳細(xì)代碼實(shí)現(xiàn)詳見這里 http://www.reibang.com/p/e3d7d72bd4ca (←_←)
