在移動(dòng)端需要實(shí)現(xiàn)如下搜索相關(guān)的功能

點(diǎn)擊搜索按鈕實(shí)現(xiàn)搜索

搜索按鈕

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

在html5 中 input 已經(jīng)支持search 類型，iso/安卓所幸也都有自己的相應(yīng)實(shí)現(xiàn)。只需要按照移動(dòng)端的標(biāo)準(zhǔn)來(lái)寫(xiě)，那我就會(huì)為我們提供我們所需的搜索按鈕。

按照這種寫(xiě)法，我們就能實(shí)現(xiàn)切換到帶有搜索按鈕的鍵盤(pán)

發(fā)送數(shù)據(jù)

發(fā)送搜索框中填寫(xiě)的數(shù)據(jù)，這或許是個(gè)難點(diǎn)。

對(duì)于發(fā)送數(shù)據(jù)來(lái)說(shuō)，因?yàn)橐呀?jīng)有了form 表單，所以至少可以用form 表單和 ajax 發(fā)送數(shù)據(jù)

form 表單發(fā)送數(shù)據(jù)

默認(rèn)點(diǎn)擊搜索按鈕是響應(yīng)form 的 submit 事件。一般就可以捕獲這個(gè)事件獲取相應(yīng)值發(fā)送至 action 指定的鏈接中就OK。

但是因?yàn)樵诤蠖私涌谥兄唤邮?json 跟 http 類型，對(duì)于form 表單的 application/x-www-form-urlencoded 接受不了。

對(duì)于類型限制，很容易就想到了設(shè)置發(fā)送類型，修改成我們要想要的類型.

根據(jù) W3C 標(biāo)準(zhǔn)來(lái)說(shuō)，我們理論上可以這樣設(shè)置來(lái)修改請(qǐng)求類型：

但實(shí)際來(lái)看， 并不能發(fā)送json 數(shù)據(jù)。 實(shí)際請(qǐng)求頭如下：

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

沒(méi)有改變成我們想要的application/json類型， 其中緣故，不夠?qū)I(yè)，故不能深入。

修改類型失敗后，嘗試別的思路。 用ajax 發(fā)送json 類型數(shù)據(jù)。

ajax 發(fā)送json數(shù)據(jù)

form 表單默認(rèn)監(jiān)聽(tīng) submit 事件，發(fā)送application/x-www-form-urlencoded 數(shù)據(jù)，我們只需重寫(xiě)覆蓋掉submit 的響應(yīng)事件就好。

所以可以如此做：

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

// ajax 請(qǐng)求函數(shù);

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

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。