需求：

实现按搜索内容实现全文检索，支持查看搜索结果上一个下一个，页面会自动滚动到指定位置。如图：

需求听起来很简单，但是遇到一些ios上面的坑。在此总结一下：

• 搜索框吸顶定位。
• input 长按页面滚动。
• js设置回车文案（search）

1、搜索吸顶

方案一：fixed绝对定位。遇到的坑是input在获取光标时整个定位会出现有上到下的滑动出现问题，搜索结束后滚动页面也会出现短暂的定位失效。查找了一下文档，没有很好的解决办法。所以果断转了方案二。

方案二：absolute + 动态高度。

• 首先设置搜索内容的定为，利用js根据页面的高度计算出屏幕高度然后给内容（main）模块设置动态高度。设置之后会出现滚动不流畅以及搜索回车之后页面整体上移问题。不要慌，接下来解决这个两个问题
• 滚动不流畅。我是用的overflow：scroll；-webkit-overflow-scrolling: touch;解决的，百度一下就能出来。
• 页面整体上移我用了取巧的办法，在回车事件内给input直接添加blur()事件，这样就不会出现页面上移的情况了。 到此我们的第一个搜索吸顶问题得到解决😝。

2、input长按粘贴的时候回出现页面滚动现象

我采用的是记住页面当前滚动位置，在input获取光标的事件内加上滚动到此位置就可以了 。代码如下：

$("html, body .info").animate({
   scrollTop: old_scroll_top + "px"
 }, 0);

3、js设置回车文案（search）

必须要添加from表单才可以实现。代码如下：

<form action="#" class="search-left" onsubmit="return false;">
  <input id="search" type="search" class="search-inp" value="" placeholder="Search"/>
  <span class="results">1/75</span>
  <img class="clear-inp" alt="" src="img/close.png" />
</form>

到此填坑完毕👻👻👻。

接下来讲一下怎么实现的全文检索

很简单，就是利用了一个选择器方法 contains，用法请自行百度。然后正则查找，文本替换完美搞定。

总结

只是简单的叙述了一下自己遇到的问题以及我的解决方法。如有更好的欢迎讨论。或者不明白的也欢迎提问😋。