移动端html搜索怎么写,移动端实现搜索功能
在移動(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)題。
- 上一篇: osm 搭建离线地图_使用离线OSM离线
- 下一篇: java selenium教程_Sele