在移動端需要實現如下搜索相關的功能

點擊搜索按鈕實現搜索

搜索按鈕

這里首先就會遇到怎么彈出搜索按鈕。

在html5 中 input 已經支持search 類型，iso/安卓所幸也都有自己的相應實現。只需要按照移動端的標準來寫，那我就會為我們提供我們所需的搜索按鈕。

按照這種寫法，我們就能實現切換到帶有搜索按鈕的鍵盤

發送數據

發送搜索框中填寫的數據，這或許是個難點。

對于發送數據來說，因為已經有了form 表單，所以至少可以用form 表單和 ajax 發送數據

form 表單發送數據

默認點擊搜索按鈕是響應form 的 submit 事件。一般就可以捕獲這個事件獲取相應值發送至 action 指定的鏈接中就OK。

但是因為在后端接口中只接受 json 跟 http 類型，對于form 表單的 application/x-www-form-urlencoded 接受不了。

對于類型限制，很容易就想到了設置發送類型，修改成我們要想要的類型.

根據 W3C 標準來說，我們理論上可以這樣設置來修改請求類型：

但實際來看， 并不能發送json 數據。 實際請求頭如下：

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

Accept-Encoding:gzip, deflate

Accept-Language:zh-CN,zh;q=0.8,en;q=0.6

Cache-Control:no-cache

Connection:keep-alive

Content-Length:23

Content-Type:application/x-www-form-urlencoded

沒有改變成我們想要的application/json類型， 其中緣故，不夠專業，故不能深入。

修改類型失敗后，嘗試別的思路。 用ajax 發送json 類型數據。

ajax 發送json數據

form 表單默認監聽 submit 事件，發送application/x-www-form-urlencoded 數據，我們只需重寫覆蓋掉submit 的響應事件就好。

所以可以如此做：

document.getElementById("searchSubmit").onsubmit = function () {

// ajax 請求函數;

//event.preventDefault(); 也可以不加耶

}

總結

以上是生活随笔為你收集整理的移动端html搜索怎么写,移动端实现搜索功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。