模糊搜索框（H5），兼容安卓和ios(令人头大的ios输入法)

项目里要可以实现，按照模糊,于是从jq22网站找到一个代码，效果如图：

修改的第一版：按照名称进行模糊查询：

搜索效果：

，

添加，每行的颜色渐变：

跟ios浏览器显示的较劲，首先区别于安卓微信的x5浏览器，苹果手机的微信浏览器不支持，keyup，的事件，输入内容后，无法正常检索，实现模糊查询的功能，

于是上网找到了input的方法；

inupt方法，可以正常触发搜索框内容改变的事件，但是在ios输入法，输入字符串成效果会先把拼音加载到输入框，导致输入框出现乱码；解决方法，加入了compositionstart，compositionend的方法，这个东西相当于一个开关，当你输入完成后，给搜索框一个结果，现在可以检索了，就如同一个钥匙，把门开开后，你就不翻墙，就可以光明正大的走出来了。代码如下：

因为涉及到多个页面的使用和判断，这里就不把详细的代码帖出来了，最原始的代码给了大家，各个坑也给大家填了不少，其他就看自己的需求了。

原文链接，具体代码，可查看博客园链接：西平sir博客园