移动端实现搜索功能

2019年9月14日 112次阅读 来源: mugbya

在移动端需要实现如下搜索相关的功能

  • 点击搜索按钮实现搜索

《移动端实现搜索功能》

搜索按钮

这里首先就会遇到怎么弹出搜索按钮。

在html5 中 input 已经支持search 类型，iso/安卓所幸也都有自己的相应实现。只需要按照移动端的标准来写，那我就会为我们提供我们所需的搜索按钮。

<form  action="" method="post" id="searchSubmit">
    <input class="Search-input" type="search" placeholder="随意输入，智能搜索"/>
</form>

按照这种写法，我们就能实现切换到带有搜索按钮的键盘

发送数据

发送搜索框中填写的数据，这或许是个难点。

对于发送数据来说，因为已经有了form 表单，所以至少可以用form 表单和 ajax 发送数据

form 表单发送数据

默认点击搜索按钮是响应form 的 submit 事件。一般就可以捕获这个事件获取相应值发送至 action 指定的链接中就OK。

但是因为在后端接口中只接受 json 跟 http 类型，对于form 表单的 application/x-www-form-urlencoded 接受不了。

对于类型限制，很容易就想到了设置发送类型，修改成我们要想要的类型.

根据 W3C 标准来说，我们理论上可以这样设置来修改请求类型：

<form enctype='application/json'>
</form>

但实际来看， 并不能发送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(); 也可以不加耶
    }
    原文作者：mugbya
    原文地址: https://segmentfault.com/a/1190000003968232
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞