首页 > 代码库 > 如何让你的webapp也能跳窗口搜索
如何让你的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都采用这样方式去搜索，我想应该是为了更好的显示出搜索结果，也是为了更好的用户体验
如何让你的webapp也能跳窗口搜索
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。