如何让你的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都采用这样方式去搜索，我想应该是为了更好的显示出搜索结果，也是为了更好的用户体验　　

转载于:https://www.cnblogs.com/tanxu/p/5908622.html

如何让你的webapp也能跳窗口搜索相关推荐

C++Jump Search跳转搜索的实现算法(附完整源码)
C++Jump Search跳转搜索的实现算法 C++Jump Search跳转搜索的实现算法完整源码(定义,实现,main函数测试) C++Jump Search跳转搜索的实现算法完整源码(定义,实 ...
C语言实现跳转搜索jump search算法(附完整源码)
跳转搜索jump search算法跳转搜索jump search算法的完整源码(定义,实现,main函数测试) 跳转搜索jump search算法的完整源码(定义,实现,main函数测试) #inc ...
【Springboot 入门培训】#7 (Framework7 移动webapp) 页面路由跳转
学习使用routes 路由来进行页面访问,如何定义路由类routes属性与方法引用.掌握routes 路由类的使用就掌握了Framework7 页面之间的访问控制,才能真正的发挥Framework ...
vue 移动端跳页搜索自动获取焦点
需求:点击搜索框跳转新页面然后自动获取焦点弹起键盘. 遇到的问题: input的autofocus属性在android上可以,在ios上不兼容,ios为了安全起见,禁掉了. 解决方案: 使用子路由做新 ...
html搜索框判断跳转,搜索关键字：ajax实现；点击搜索到的会添加到搜索框内，点击搜索跳转页面；...
登录注册(记住密码)https://blog..net/n20164206199/article/details/86218384 搜索关键字点击显示到搜索框,搜索跳转页面 https://blog ...
微信小程序---搜索功能并跳转搜索结果页面
搜索页面: search.wxml页面: <view class="form"><input class="searchInput" valu ...
Chrome谷歌浏览器地址输入栏搜索跳转搜索主页问题解决
搜索了很多方法都没能生效,最终发现问题,如果你的也没解决可以试下我这个方法. 谷歌设置默认格式搜索的时候, 网址格式(用"%s"代替搜索字词)这一项 http://www.baid ...
ios制作h5的桌面webapp的详解
时下app的解决方案大概分以下几种 1.原生ios以及android app(需要两端程序员复杂度高学习成本高可扩展性无) 2.通过native系列衍生物产生的各种js混合app,如react ...
面向微信的WebApp产品观
面向微信的WebApp产品观字数2271 阅读94 评论0 喜欢6 自从入行以来,本人的产品经理工作一直以移动端网站为主,也就是大家常说的WebApp.接触的时间久了,对WebApp这种产品形 ...

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

如何让你的webapp也能跳窗口搜索相关推荐

最新文章

热门文章