艺龙搜索改造

Chrome插件篇

艺龙有一个槽点：切换酒店，为什么2步可以完成的操作，艺龙却要我们走4步。新旧版本都一样，以旧版为例：

搜索酒店步骤<i>1.点击“设置当前酒店”->2.在搜索框输入关键词->3.点击搜索按钮->4.点击超链，跳到对应酒店的页面</i>

代替步骤：<i>1.在搜索框输入关键词->2.点击超链跳到对应的酒店页面</i>

跳转逻辑

我们需要先来看看原来的步骤是怎样跳转到对应酒店的。

分析页面代码(用审查元素功能)可以看到，设置当前酒店的页面是把本账号的所有的酒店名单都拿回来了。在搜索框输入关键字和点击搜索按钮就是帮我们筛选出含有关键词的酒店的过程。点击对应的酒店，就是点击一个超链接而已。

所有酒店列表
搜索显示结果

实现逻辑

第一步

分析http://eb.elong.com/CurrentHotels.aspx 酒店名单数据元素，写入localStorage 。需要的时候读取。我们可以用酒店名称作为键名(key)，链接地址作为键值(value)。提供一个按钮，进行这些操作。效果如图。

酒店名单写入localStorage功能按钮

第二步

搜索框移位。把原本在 http://eb.elong.com/CurrentHotels.aspx 页面的搜索框，放到每个页面的右上角。在简繁体中文切换的旁边。这样一来就不用每次都跳到搜索酒店的页面了。代码如下，效果如图。

搜索框移位

第三步

输入框绑定oninput事件，输入框值有变化的时候，马上就可以执行搜索，并且同时给出符合关键字酒店列表

搜索效果

第四步

点击对应的列表项，就可以跳转到相应的酒店页面。

列表项就是连接

写在结尾

虽然这个变动不算很大。但是当你需要频繁使用这个功能的时候。就能体会到带来多大的便利性。

如果有帮到你，给我点个赞啦 (^_-)
详细代码实现详见这里 http://www.jianshu.com/p/e3d7d72bd4ca (←_←)