目前很多手机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都采用这样方式去搜索,我想应该是为了更好的显示出搜索结果,也是为了更好的用户体验  

  

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

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

    A*是一个比较经典的启发式寻路算法.是基于dijkstra算法,但是加入了启发函数,使路径搜索效率更高.实现起来很简单.不过要做到通用性高,比如支持各种不同类型的地图,甚至不仅仅是地图,而是个图结构如 ...

  2. Genymotion模拟器一滑动页面就跳到搜索003

    今天郁闷的要死,好不容易让Appium关联起Genymotion了,但是一滑动屏幕就跳转到搜索003界面,当时还以为是Appium的Bug或者Genymotion本身出问题了. 结果网上搜了一段时间( ...

  3. iOS - 小功能 跳转到淘宝或天猫的商品展示详情页

    最近做iOS项目的时候遇到一个需求,点击广告页,跳转到淘宝或天猫的商品详情页. 具体需要是这样: 1)安装了淘宝:跳转到淘宝详情页. 2)没装淘宝,装了天猫:跳转到天猫详情页 3)淘宝.天猫都没装:跳 ...

  4. 手机WebApp是什么?

    手机WebApp是基于HTML5+css3开发的,一次开发,可以兼容许多的平台(android/iphone),调用本地功能(比如照相),可以用phonegap去实现,所以,是一个趋势.相比每个平台定 ...

  5. 跳表(skiplist)Python实现

    # coding=utf-8 # 跳表的Python实现 import random # 最高层数设置为4 MAX_LEVEL = 4 def randomLevel(): ""& ...

  6. React-Native 之 GD (十)Android启动页面 及 模态方式跳转

    1.Android启动页面 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main ...

  7. React-Native 之 GD (十一)加载更多功能完善 及 跳转详情页

    1.加载更多功能完善 GDHome.js /** * 首页 */ import React, { Component } from 'react'; import { StyleSheet, Text ...

  8. JQUERY相关

    https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...

  9. java 自动登录代码

    javaBean的代码    package bean;    import java.io.Serializable;    public class Admin implements Serial ...

随机推荐

  1. 洛谷P3916 图的遍历 [图论,搜索]

    题目传送门 图的遍历 题目描述 给出 N 个点, M条边的有向图,对于每个点 v ,求 A(v) 表示从点 v 出发,能到达的编号最大的点. 输入输出格式 输入格式: 第1 行,2 个整数 N,M . ...

  2. 洛谷P3975 跳房子 [DP,单调队列优化,二分答案]

    题目传送门 跳房子 题目描述 跳房子,也叫跳飞机,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一. 跳房子的游戏规则如下: 在地面上确定一个起点,然后在起点右侧画 n 个格子,这些格子都在同一 ...

  3. hibernate自连接--典型的oracle自带emp实现

    用S2SH三大框架整合,用了oracle自带的表emp,实现了自连接. pojo类: public class Emp implements java.io.Serializable { // Fie ...

  4. mysql查询优化以及面试小结

    mysql面试小结: 1.mysql的基本架构 2.mysql的索引 btree+的原理 3.mysql的索引优化 4.mysql的sql查询优化 慢查询日志 Show prodile 全局查询日志 ...

  5. 洛谷——P2009 跑步

    P2009 跑步 题目背景 跑步是一项有意思的运动,尤其是可以开发人的脑筋.常神牛很喜欢跑步. 题目描述 常神牛跑步的场地是一个多边形(边数≤20,每个顶点用英文大写字母表示),并且在这个多边形内部, ...

  6. 【POJ 2154】 Color (置换、burnside引理)

    Color Description Beads of N colors are connected together into a circular necklace of N beads (N< ...

  7. [NOI2015]小园丁与老司机(DP+上下界最小流)

    由于每行点的个数不超过1000,所以行内DP可以使用$O(n^2)$算法. 先找到每个点所能直接到达的所有点(x,y,x+y或x-y相同),用排序实现. 第一问:以行为阶段,对于每行,暴力枚举最有路径 ...

  8. ARC 080 - C 4-adjacent

    题面在这里! 把每个数替换成它在2上的指数,然后发现0只能和>=2的相邻,所以手玩一下就好啦. #include<bits/stdc++.h> #define ll long lon ...

  9. BZOJ 2084 [Poi2010]Antisymmetry(manacher)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2084 [题目大意] 对于一个01字符串,如果将这个字符串0和1取反后, 再将整个串反过 ...

  10. lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵

    思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...