移动端html搜索怎么写,移动端实现搜索功能

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

点击搜索按钮实现搜索

bVqOsv

搜索按钮

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

在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(); 也可以不加耶

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git master代码被删除 怎么恢复_git 分支的删除与恢复

有没有,git创建无意中名字起错了,分支上传错了,想删除了?删除做了想恢复了?远程与本地都删除了要恢复的情况呢?如果有,那么一下内容获取你会感兴趣。删除分支有的时候可能会遇到需要删除git的br…

空白DirectX11应用程序

我用的开发工具是Visual Studio 2015,开发了第一个win32应用程序虽然顺利,但是一旦添加DirectX相关代码应用便无法启动了,出现了一连串问题!让我瞬间一蹶不振!但是隔了几天我尝试的心情又卷土重来,又尝试了…

计算机裸机与应用程序及用户之间的桥梁是,2016计算机二级《MS Office》单选试题与解析...

2016计算机二级《MS Office》单选试题与解析(1)下列叙述中正确的是A)一个算法的空间复杂度大,则其时间复杂度也必定大B)一个算法的空间复杂度大,则其时间复杂度必定小C)一个算法的时间复杂度大,则其空间复杂度必定小D)算法的时间复杂度与空间…

10kv线路负载率计算_10kV配电线路保护的整定计算

1、10kV配电线路的特点10kV配电线路结构特点是一致性差,如有的为用户专线,只接带一、二个用户,类似于输电线路;有的呈放射状,几十台甚至上百台变压器T接于同一条线路的各个分支上;有的线路短到几百m&#x…

diamond升级IP,覆盖的时候报错

这几天给客户调试DDR3 SDRAM Controllerd发现个很奇怪的问题。客户之前用的IP是DDR3 SDRAM Controllerd 1.4,客户想升级为DDR3 SDRAM Controllerd 3.0。客户直接双击之前的工程,然后regenerate,发现报错了,如下图。然后我就思考是…

一台微型计算机的处理速度主要取决于,2017年答案计算机等级考试题库「附答案」...

2017年答案计算机等级考试题库「附答案」一、单选题1、世界上首次提出存储程序计算机体系结构的是A 莫奇莱 B 艾仑图灵 C 乔治布尔 D 冯诺依曼2、世界上第一台电子计算机诞生于A 1941年 B 1946年 C 1949年 D 1950年3、世界上第一台电子数字计算机采用的主要逻辑部件是A 电子管 …

让我摘下星星送给你_想摘下星星给你摘下月亮给你是什么歌

最近中国新说唱有一首歌很是好听,这首歌歌曲开头是想摘下星星给你摘下月亮给你,那么这首歌是什么歌呢?下面就让我们来了解一下吧。想摘下星星给你摘下月亮给你是什么歌据悉这首歌叫作《星球坠落 (Live)》是由艾热 / 李佳隆演唱的星球坠落 (Live)歌手&am…

获取iOS系统版本

获取ios设备系统信息的方法 之 [UIDevice currentDevice] 获取iphone的系统信息使用[UIDevice currentDevice],信息如下: [[UIDevice currentDevice] systemName]:系统名称,如iPhone OS [[UIDevice currentDevice] systemVersion]&#xff1a…

html高度随宽度编号,纯css实现容器高度随宽度等比例变化的四种解决方案

使用一个隐藏的图片来实现这个方法是我最推荐的,因为不需要考虑任何兼容性,PC移动完美运行。除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提我们知道,div容器如果不给定高度,它的高…

cad上样条曲线上的点太多了_CAD样条曲线怎么能增加编辑点? CAD中如何按照

请问怎么增加编辑点!!谢谢用样条曲线编辑命令:splinedit,画好的样条曲线想编辑一下,但是有时编辑点太少了影响编辑效果。命令行示例如下命令命令: _splinedit选择样条曲线输入选项 [拟合数据(F)/闭合(C)/移动顶点(M)/精…

Oracle中的伪列

分页查询中&#xff0c;需要用到伪列rownum&#xff0c;代码如下&#xff1a; select * from (select rownum rn, name from cost where rownum < 6) where rn >3; 可是第一次用rownum&#xff0c;第二次用rn&#xff0c;位置不能变&#xff0c;否则出错&#xff0c;第一…

燕山大学计算机学院官网,燕山大学信息科学与工程学院(专业学位)计算机技术保研夏令营...

考研真题资料优惠价原价选择燕山大学信息科学与工程学院(专业学位)计算机技术保研夏令营信息&#xff0c;是考研之前需要获取相应的考研信息&#xff0c;比如考试大纲、招考专业、招考目录等等基本信息&#xff0c;这些内容是进行考研前期工作的必要准备。考生可以从各院校的研…

pde中微元分析法的主要思想_有限元方法的核心思想

有限元法(Finite Element Method)是基于近代计算机的快速发展而发展起来的一种近似数值方法&#xff0c;用来解决力学&#xff0c;数学中的带有特定边界条件的偏微分方程问题(PDE)。而这些偏微分方程是工程实践中常见的固体力学和流体力学问题的基础。有限元和计算机发展共同构…

phpnow升级php版本 php-5.2.14-Win32升级至5.3.5

PHPNow自带的PHP版本为5.2.14&#xff0c;而最后一次更新在于2010-9-22。下面来升级PHP5.3.5&#xff1a; 1、下载安装文件&#xff1a; 先下载PHP5.3.5&#xff0c;下载地址&#xff1a;php-5.3.5-Win32-VC6-x86.zip 访问密码&#xff1a;c69c 将下载的解压至phpnow的安装目…

计算机无法计算,计算器不能执行计算功能,运算结果始终为0

部分代码&#xff1a;public void onClick(View v) {// TODO Auto-generated method stubString strt1.getText().toString();switch(v.getId()){case R.id.button16:case R.id.button13:case R.id.button14:case R.id.button15:case R.id.button9:case R.id.button10:case R.i…

iconfont 图标转为字体_App 中使用 Iconfont 的整套方案

作者&#xff1a;集美貌与才华于一身的 小芳什么是Iconfont我们通常看到的图标都是以图片形式集成到项目中使用&#xff0c;而 Iconfont 是一套字体图标&#xff0c;和我们使用自定义字体的方式是一样的&#xff0c;并且它是一种矢量图标。计算机中显示的图形一般分为两类---位…

class之cls

cls代表的是类本身&#xff0c;一般在静态方法中使用 转载于:https://www.cnblogs.com/goldd/p/5563845.html

计算机网络系统系统设备配置,计算机网络系统技术方案及设备配置方案

计算机网络系统技术方案及设备配置方案一 计算机网络系统技术方案及设备配置方案 计算机网络系统技术方案及(一)计算机网络系统项目概述 计算机网络系统项目概述随着计算机技术、通讯技术的飞速发展&#xff0c;计算机网络正快速覆盖社会的各行 各业&#xff0c;使我们感受到网…

aix 的c库为什么都是静态库_Linux静态库生成指南

Linux上的静态库&#xff0c;其实是目标文件的归档文件。在Linux上创建静态库的步骤如下&#xff1a;写源文件&#xff0c;通过 gcc -c xxx.c 生成目标文件。用 ar 归档目标文件&#xff0c;生成静态库。配合静态库&#xff0c;写一个使用静态库中函数的头文件。使用静态库时&a…

计算机控制常用数据通信标准,计算机控制数据通信基础要点.ppt

计算机控制数据通信基础要点.ppt第2 章 数据通信技术基础 数据通信是为了实现计算机与计算机、计算机与终端之间信息交互而产生的一种通信技术&#xff0c;是计算机与通信相结合的产物。 2.1数据通信概述 2.1.1 几个基本概念 1、信息(information)&#xff1a;人对世界事物存在…