Using Google Custom Search engine in PrimeFaces Overlay Panels

The following is an example on how to implement a custom Google Search engine in PrimeFaces version 4 <p:overlayPanel />. First create an account with Google Custom search (CSE) here https://www.google.com/cse. You will get your own Custom Search engine ID. From within your CSE account you will find a place to generate the following basic CSE Javascript code. Place this code in the head section or in the body just before the closing </body> tag, whichever is prefered.

<script>
(function() {
    var cx = 'REPLACE WITH YOUR OWN ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();
</script>

Replace line number 3 in the above Javascript code with your own Custom Search engine ID. The above code will look by default for a <div /> element with "gcse-search" class somewhere in your page. Create a <div /> like below. Place this where you want the search to appear in the page.

<div style="min-height:70px;max-height:600px;overflow-y:auto;">
   <div class="gcse-search">                                   
   </div>
</div>

Notice the wrapper <div /> line 1 above. This is where the size, etc., of input element and results panel is defined. You may want to create a CSS class for this in your implementation instead of inlined style. In your CSE account you are also able to define the "Look and Feel" of the custom search including a theme. Styling further is accomplished by overriding predefined CSS style rules. Below are sample overrides:

// The result items
 .gs-webResult {
      padding-bottom: 13px;
      font-size:11px;
      font-weight: normal;         
 }  

// Search information (ex. About 53 results (0.38 seconds))    
.gsc-result-info {
      font-weight: normal !important;
      font-size: 9px !important;
}

// The paginator    
.gsc-cursor-page {
    padding: 4px 8px;
    border: 1px solid darkseagreen;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
   border-radius: 5px; 
}

// The text input control    
input.gsc-input {
    font-size: 13px !important;
    font-weight:bold;
}

Visit the link below for the complete CSS style rules for the default theme.

http://www.google.com/cse/style/look/default.css

To further customize the custom search visit the CSE documentation here.

https://developers.google.com/custom-search/docs/element

The custom search in PrimeFaces <p:overlayPanel />

Our custom search is lunched from a menu bar. Here is the complete menubar component with the overlay panel in the <f:facet /> section of this component. Note that the layout of the Custom Search engine defined in the settings of your account should be either compact or full width.

<h:form prependId="false">                
    <p:menubar autoDisplay="true" >                        
        <p:menuitem  url="/home"                                            
                     icon="ui-icon-home" value="Home"  />
                       
        <f:facet  name="options">
                <p:graphicImage styleClass="dimmed-image" 
                                id="gsePanel"
                                    value="/images/search-icon.png"
                                    alt="The Kahimyang Project"   />
   
                <p:overlayPanel  styleClass="search-results-overlay" 
                                 showEffect="slide"   
                                 hideEffect="fade" 
                                for="gsePanel" 
                                showEvent="mousedown" 
                                hideEvent="mousedown">  

                    <div class="google-s-wrapper" >
                        <div   class="gcse-search">
                        </div>                                 
                    </div>
                </p:overlayPanel>                                      
        </f:facet>
    </p:menubar>
</h:form>   

Re-styling the menubar for your PrimeFaces theme.

// Change default menu bar background color
.ui-menubar {
      background-color: darkseagreen !important;
 }  

// Change text color and weight of font
.ui-menubar .ui-menuitem-link {
   font-weight: bold !important;
   color:#264026 !important;
}

// The dropdown in submenu
.ui-menu-list {
    background-color: darkseagreen !important;
}  

As a demo, click on the search icon at the right side of the menu bar of this page (desktop version of this page only). That's it. Good luck.