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>