目前很多手機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也能跳窗口搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。