How to make your webapp can also jump window search

<span id="Label3"></p><p><p>At present many mobile phone app or some webapp, the search bar basically uses the Jumping window search way</p></p><p><p></p></p><p><p></p></p><p><p>What to do</p></p><p><p>Implementation Method:</p></p><p><p>1, in the triggering of the outer input when the modal layer, the default opening of the modal layer when the input of the Moda triggered the focus event</p></p><p><p>2, the soft keyboard into the search words, in the web you may feel that input type= "search" will be natural to change the line into a search two words, in fact, you need to use a form to wrap</p></p><pre class="brush:csharp;gutter:true;"><pre class="brush:csharp;gutter:true;"><form method= "post" id= "form" action= "#" > <div class= "sosomodal_in" > <input type= "text" id= " Searchkeyvalue "><span> Cancel </span> </div> </form></pre></pre><p><p>3, If you do not need a form submission, but want to go through the Ajax asynchronous submission of the search, you need to block the default behavior of the form, return false;</p></p><p><p>4, listen to keycode=13 events, process the search logic, display the search data in the modal layer</p></p><p><p>5, modal layer of the Cancel button monitoring Click events, Click to close the modal layer, back to the list Page.</p></p><p><p>The structure of the HTML should look something like this:</p></p><pre class="brush:csharp;gutter:true;"><pre class="brush:csharp;gutter:true;"><!--search modal box--><div class= "sosomodal" > <form method= "post" id= "form" action= "#" > <div class= "sosomodal_in" > <input type= "text" placeholder= "search" id= "searchkeyvalue" ><span> Cancel </ span> </div> </form> <div class= "list_con searchresultcon" > <!--search results, item--> </div> <div id= "pagecon" ></div></div><!--search box--><div class= " Search_wrap "><input type=" text "id=" search_txt "placeholder=" Enter search keywords ... "/></div></pre></pre><p><p>JS Simple write should be similar to this</p></p><pre class="brush:csharp;gutter:true;"><pre class="brush:csharp;gutter:true;"> Open modal$ ("#search_txt"). Focus (function () {$ (". sosomodal"). fadeIn (+); $ (". sosomodal_in input"). Focus ();}); /monitor Cancel<br>$ (". sosomodal span"). on (' click ', function () {$ ('. sosomodal '). fadeOut (+); $ (' #searchKeyValue '). val ()! = "? $ (' # Searchkeyvalue '). Val (""): "";}); /listen Enter Search key var searchtxt = $ (' #searchKeyValue '); keydown (function (e) {if (e.keycode==13) {//replace list data 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 = "";}<br>Show search results wf.init ();//close current modal$ ('. sosomodal '). fadeOut (400);<br>Search bar Value Empty searchtxt.val ()! = ""? searchtxt.val (""): "";//block default event return false;});</pre></pre><p><p>About why the app uses this way to search, I think it should be to better display the results of the search, but also for a better user experience</p></p><p><p>　　</p></p><p><p></p></p><p><p>How to make your webapp can also jump window search</p></p></span>