目前很多手机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. 《深入理解Android2》读书笔记(二)

    接之前那篇<深入理解Android2>读书笔记(一) 下面几篇来分别详细分析 Binder类作为服务端的Bn的代表,BinderProxy类作为客户端的Bp的代表,BinderIntern ...

  2. python抓取网页图片的小案例

    1.分析 ,要抓取的页面的信息以及对应的源码信息 blog.sina.com.cn/s/blog 93dc666c0101b1bj.html 2.代码模块: 导入正则表达的模块 导入url相关的模块 ...

  3. STL容器 -- Queue

    核心:先进先出, FIFO. 头文件: #include <queue> 常用的构造方法: queue<int> qu1; //构造一个空的存放 int 型的队列 queue& ...

  4. Flask实战第49天:cms轮播图管理页面布局

    新建cms_banners.html继承cms_base.html {% extends 'cms/cms_base.html' %} {% block title %} 轮播图管理-CMS管理系统 ...

  5. 【webssh】shellinabox搭建

    shellinabox搭建 centos环境安装命令 # yum install epel-release # yum install shellinabox 启动与关闭: service shell ...

  6. Python的zip函数(转)

    原文地址:http://www.cnblogs.com/frydsh/archive/2012/07/10/2585370.html zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tu ...

  7. 十. 图形界面(GUI)设计14.键盘事件

    键盘事件的事件源一般丐组件相关,当一个组件处于激活状态时,按下.释放或敲击键盘上的某个键时就会发生键盘事件.键盘事件的接口是KeyListener,注册键盘事件监视器的方法是addKeyListene ...

  8. CSS写作建议和性能优化总结(未完待续)

    这里是我从网上的一篇文章看过来的,这里先做一点小结,之后再补充. 1.CSS渲染规则 今天在微博的一篇文章上看到的,之前我都以为渲染是从左往右渲染.发现我的想法是错的.之所以采用从右往左的渲染规则,是 ...

  9. Android Logcat Security(转)

    讲解了在Android开发中logcat使用不当导致的安全问题 原帖地址:http://drops.wooyun.org/tips/3812 0x00 科普 development version : ...

  10. POJ 3608 Bridge Across Islands(旋转卡壳,两凸包最短距离)

    Bridge Across Islands Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7202   Accepted:  ...