在移动端需要实现如下搜索相关的功能
点击搜索按钮实现搜索
搜索按钮
这里首先就会遇到怎么弹出搜索按钮。
在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(); 也可以不加耶
}