SharePoint Search Box Trick For Handling Search Input Enter Key.


Some of SharePoint developer who face issues with SharePoint search box that the enter key should be hit twice to do search, this strange behavior appears in both (Firefox and Chrome browsers), if you follow the event and method executed to do search you will find script rendered by SharePoint that is responsible for doing search as follow: 

 function SearchEnsureSOD() {  
       EnsureScript('search.js', typeof (GoSearch));  
     }  
     _spBodyOnLoadFunctionNames.push('SearchEnsureSOD');  
     function S6F789EBA_Submit() {  
       if (document.getElementById('ctl00_SearchBox_ctl03').value == '0') {  
         document.getElementById('ctl00_SearchBox_S6F789EBA_InputKeywords').value = '';  
       }  
       SearchEnsureSOD();  
       GoSearch('ctl00_SearchBox_ctl03', 'ctl00_SearchBox_S6F789EBA_InputKeywords', null, true, false, null, null, null, null, null, '\u002fSearch\u002fPages\u002fResults.aspx', '\u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0642\u0639', '\u0647\u0630\u0647 \u0627\u0644\u0642\u0627\u0626\u0645\u0629', '\u0647\u0630\u0627 \u0627\u0644\u0645\u062C\u0644\u062F', '\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0630\u0627\u062A \u0627\u0644\u0635\u0644\u0629', '\u002fSearch\u002fPages\u002fResults.aspx', '', '\u0627\u0644\u0631\u062C\u0627\u0621 \u0625\u062F\u062E\u0627\u0644 \u0643\u0644\u0645\u0629 \u0628\u062D\u062B \u0648\u0627\u062D\u062F\u0629 \u0623\u0648 \u0623\u0643\u062B\u0631.'); if (document.getElementById('ctl00_SearchBox_ctl03').value == '0') {  
         document.getElementById('ctl00_SearchBox_S6F789EBA_InputKeywords').value = '\u0623\u062F\u062E\u0644 \u0646\u0635 \u0627\u0644\u0628\u062D\u062B ...';  
       }  
     }  

so that code ensure loading of java script file called "search.js" that is responsible for search handling by calling 

 _spBodyOnLoadFunctionNames.push('SearchEnsureSOD');  

i think that calling not performed well by neither Firefox nor Chrome "this calling will push SearchEnsureSOD method to onload event handled by SharePoint" if this method not performed as expected so the script will not be loaded so when enter key be hit it will call "S6F789EBA_Submit()" and for the first time the "SearchEnsureSOD will executed" and no redirect to search page will not be performed
and the next hi will fire search normally.

to handle this simply, we will ensure loading of "Search.js" at ready event by this we make sure that search java script file loaded successfully.

 $(document).ready(function () {  
    SearchEnsureSOD();  
 });  

by this Enter key will perform normally "Try and Have Fun"

Bottom to Up Image Transition Effect
Today i will introduce very simple code snippet for applying image transition effect by using jQuery and CSS, now let us go to directly to HTML

 <div class="wrapper">  
     <div class="facesDiv">  
       <img src="images/03.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/03_hover.png" class="face" style="left: 0;" alt="face" />  
       <img src="images/02.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/02_hover.png" class="face" style="left: 128px;" alt="face" />  
       <img src="images/01.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/01_hover.png" class="face" style="left: 256px;" alt="face" />  
     </div>  
   </div>  

only 3 images as sample with known HEIGHT and WIDTH, give them the same class to be handled by jQuery and CSS such "face" also specify three nonstandard attributes to be handled by jQuery code as the following

1. originalheight: this is the original image height.
2. hoverheight: the maximum height after hover action.
3. hoverimage: the image to be replaced after hover action.

also let us take a look on the JavaScript

 <script type="text/javascript">  
     $(document).ready(function () {  
       var navHeight = 0;  
       var tmpimage = '';  
       $('img.face').mouseenter(function () {  
         tmpimage = $(this).attr('src');  
         navHeight = $(this).attr('hoverheight') - $(this).attr('originalheight');  
         $(this).attr('src', $(this).attr('hoverimage'));  
         $(this).animate(  
         {  
           top: "-=" + navHeight,  
           height: "+=" + navHeight,  
           duration: 1000  
         });  
       }).mouseleave(function () {  
         $(this).attr('src', tmpimage);  
         $(this).animate(  
         {  
           top: "+=" + navHeight,  
           height: "-=" + navHeight,  
           duration: 1000  
         });  
       });  
     });  
   </script>  

and finally the CSS

 body  
 {  
   padding: 0px;  
   margin: 0px;  
 }  
 .wrapper  
 {  
   width: 384px;  
   height: 500px;  
   margin: auto;  
   text-align: center;  
 }  
 .facesDiv  
 {  
   position: relative;  
   height: 100px;  
   top: 200px;  
   margin: 0;  
   padding: 0;  
 }  
 .face  
 {  
   position: absolute;  
   float: left;  
   bottom: 0;  
 }  

for a complete sample, you can download the file  here