如何让你的webapp也能跳窗口搜索

目前很多手机app或者一些webapp,搜索栏基本采用跳窗口的搜索方式

怎么做

实现方式:

1、在触发外层的input的时候打开个modal层,默认打开该modal层的时候就触发了moda里面的input的focus事件

2、将软键盘变成搜索字样,在web中你可能会觉得input type="search"就会很自然的换行变成了搜索两个字,其实不然,你需要用form去裹着

<form method="post" id="form" action="#">
		   <div class="sosoModal_in">

			    <input type="text" id="searchKeyValue" ><span>取消</span>

		   </div>
	   </form>

3、如果你不需要form提交,而是想通过ajax去异步的提交搜索,你需要阻止掉form的默认行为,return false;

4、监听keycode=13的事件,处理搜索逻辑,在modal层中显示搜索数据

5、modal层的取消按钮监听点击事件,点击后关闭该modal层,退回到列表页。

html的结构应该是类似这样的:

<!--搜索模态框-->
		<div class="sosoModal">
		   <form method="post" id="form" action="#">
			   <div class="sosoModal_in">
				    <input type="text" placeholder="搜索" id="searchKeyValue" ><span>取消</span>
			   </div>
		   </form>
		   <div class="list_con searchResultCon">
		   	  <!--搜索结果,item-->
		   </div>
		   <div id="pageCon"></div>
		</div>
		<!--搜索框-->
		<div class="search_wrap">
			<input type="text" id="search_txt" placeholder="输入搜索关键字..." />
		</div>

js简单的写应该是类似这样的

                        //打开modal
			$("#search_txt").focus(function(){
				$(".sosoModal").fadeIn(400);
				$(".sosoModal_in input").focus();
			});
			//监听取消			$(".sosoModal span").on(‘click‘,function(){
				$(‘.sosoModal‘).fadeOut(400);
				$(‘#searchKeyValue‘).val()!=‘‘? $(‘#searchKeyValue‘).val(""):"";
			});
			//监听回车搜索键
			var searchTxt = $(‘#searchKeyValue‘);
			$(window).keydown(function(e){
				if(e.keyCode==13){

					//替换列表数据
					if (searchTxt.val() && searchTxt.val().length>0){
					     g_sqlwhere = " w.WFNAME like ‘%"+searchTxt.val()+"%‘ or  w.STARTOR like ‘%"+searchTxt.val()+"%‘ or  w.STATIME like ‘%"+searchTxt.val()+"%‘ or  w.SUBJECT like ‘%"+searchTxt.val()+"%‘ " ;
					}
					else{
					  	  g_sqlwhere = "";
					}                       //显示搜索结果
					wf.init();
					//关闭当前modal
					$(‘.sosoModal‘).fadeOut(400);                        //搜索栏值置空
					searchTxt.val()!=""?searchTxt.val(""):"";
					//阻止默认事件
					return false;
				}
			});

关于为什么app都采用这样方式去搜索,我想应该是为了更好的显示出搜索结果,也是为了更好的用户体验  

  

时间: 2024-11-09 00:14:31

如何让你的webapp也能跳窗口搜索的相关文章

寻路算法A*, JPS(跳点搜索)的一些杂谈

A*是一个比较经典的启发式寻路算法.是基于dijkstra算法,但是加入了启发函数,使路径搜索效率更高.实现起来很简单.不过要做到通用性高,比如支持各种不同类型的地图,甚至不仅仅是地图,而是个图结构如解决拼图游戏N-puzzle会用到的,就需要多花点心思.用C++实现的话,可以使用模板来适应不同的需要.也可以使用类继承. template <typename NodeType, typename CostType, typename Heuristic> static vector<No

判断值跳窗口

string da = textBox1.Text; string chui = textBox2.Text; if (da.Equals("da") && chui.Equals("chui")) { MessageBox.Show("验证成功"); Form2 f = new Form2(); f.Show(); } else { MessageBox.Show("输入失败"); Form3 f = new

手机WebApp是什么?

手机WebApp是基于HTML5+css3开发的,一次开发,可以兼容许多的平台(android/iphone),调用本地功能(比如照相),可以用phonegap去实现,所以,是一个趋势.相比每个平台定制的app,性能上可能稍微差一点,但是在可接收的范围内.听说,百度调整算法,有html5的网站和webapp,将在移动搜索上会优先显示

JAVAWEB开发之Struts2详解(一)——Struts2框架介绍与快速入门、流程分析与工具配置以及Struts2的配置以及Action和Result的详细使用

Struts2框架介绍 三大框架:是企业主流JavaEE开发的一套架构.Struts2 + Spring + Hibernate 什么是框架?为什么要学习框架? 框架是实现部分功能的代码(半成品),使用框架简化企业级软件开发. Struts2与MVC? Struts是一款优秀的MVC框架 MVC:是一种思想,是一种模式,将软件分为Model模型.View视图.Controller控制器 JAVAEE软件三层架构:web层(表现层).业务逻辑层.数据持久层(Sun提供javaEE开发规范) Jav

移动端开发:使用jQuery Mobile还是Zepto

原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobile相当于PC端的jQuery UI,它提供了很多页面的UI库,能够很快的开发出漂亮的界面,适合公司没有UI设计师的前端开发人员来进行移动端的开发.Zepto相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能,适合公司有UI设计师的前端开发人员来进行移动端的开发. jQu

java 自动登录代码

javaBean的代码   package bean;   import java.io.Serializable;   public class Admin implements Serializable{           /**      *       */     private static final long serialVersionUID = 1L;     private Integer id;     private String name;     private S

JQUERY相关

https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://projects.jga.me/jquery-builder/ jquery瘦身 源码阅读 http://www.cnblogs.com/lovesueee/archive/2012/10/18/2730287.html https://www.zhihu.com/question/20521802

移动端JS库

今天整理下移动端的js库,然后闷头研究一种好了. 从别的地扒下来的,笔记. 1. jQuery Mobile jQuery Mobile快速开发出支持多种移动设备的Mobile应用用户界面.它是当前最流行的移动开发框架. jQuery Mobile给主流移动平台带来jQuery核心库,会发布一个完整统一的jQuery移动UI框架.用jQuery Mobile为移动设备(包括智能手机和平板电脑)开发网站应用程序,RSS阅读器等应用. 假如你不熟悉jQuery,可以选择 MooTools Mobil

Vue系列:通过vue-router如何传递参数

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na