input type="search" 实现搜索以及兼容性问题

版权声明： https://blog.csdn.net/xiasohuai/article/details/84191249

html5 增加的type=search可以做到我们想要的手机端搜索框效果（但需要input type=search外面包上一层带action属性的form） 

<div class="search-input-wrap clearfix">
      <div class="form-input-wrap f-l">
         <form action="" class="input-kw-form">
            <input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
         </form>
         <i class="iconfont if-message"></i>
         <i class="iconfont if-close"></i>
       </div>
       <i class="search-cancel f-l">取消</i>
</div>

但type=search会有许多默认样式和行为，也就是兼容性bug。

1. 会默认下拉框显示搜索历史记录;
2. 输入时自动弹出“x”，“x”的样式在不同手机上，样式不同；
3. IOS 手机上输入框为椭圆形. 

但我们希望样式按照我们自定义的样式显示，并且各个手机上能统一。

问题1的解决方式：设置input autocomplete="off"去掉弹出的下拉框（搜索的历史记录）；

问题2的解决方式：

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}

问题3的解决方式：

-webkit-appearance: none;

 同时别忘记，如果提交搜索时想使用ajax，那么可以阻止表单的默认行为，因为from表单点击搜索会有默认请求行为：

方式一：

$("form").on("submit",function(event){//这里可以写获取最外层容器的class名或者标签名等等
      if(/*验证通过*/1){
                
      }else{
          event.preventDefault();
　　　　　 //return false;  当然这里也可以返回false。
      }
})

方式二：

<form action="" target="frameFile" onsubmit="return false;></from>