<pre class="brush:xml;highlight:3">
&lt;script&gt;
(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);
})();
&lt;/script&gt;

</pre>



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 &lt;div /&gt; element with "gcse-search" class somewhere in your page. Create a &lt;div /&gt; like below. Place this where you want the search to appear in the page.



<pre class="brush:xml;highlight:1">
&lt;div style="min-height:70px;max-height:600px;overflow-y:auto;"&gt;
 &lt;div class="gcse-search"&gt; 
 &lt;/div&gt;
&lt;/div&gt;

</pre>



Notice the wrapper &lt;div /&gt; 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:



<pre class="brush:css">

// 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;
}

</pre>




Visit the link below for the complete CSS style rules for the default theme.



<a href="http://www.google.com/cse/style/look/default.css" class="news_link" target="_blank" title="Default theme 

CSS">http://www.google.com/cse/style/look/default.css</a>



To further customize the custom search visit the CSE documentation here.


<a href="https://developers.google.com/custom-search/docs/element" class="news_link" title="CSE Documentation" 
target="_blank">https://developers.google.com/custom-search/docs/element</a>


<h3>
The custom search in PrimeFaces &lt;p:overlayPanel /&gt;
</h3>

Our custom search is lunched from a menu bar. Here is the complete menubar component with the overlay panel in the &lt;f:facet /&gt; 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.




<pre class="brush:xml">

&lt;h:form prependId="false"&gt; 
 &lt;p:menubar autoDisplay="true" &gt; 
 &lt;p:menuitem url="/home" 
 icon="ui-icon-home" value="Home" /&gt;
 
 &lt;f:facet name="options"&gt;
 &lt;p:graphicImage styleClass="dimmed-image" 
 id="gsePanel"
 value="/images/search-icon.png"
 alt="The Kahimyang Project" /&gt;
 
 &lt;p:overlayPanel styleClass="search-results-overlay" 
 showEffect="slide" 
 hideEffect="fade" 
 for="gsePanel" 
 showEvent="mousedown" 
 hideEvent="mousedown"&gt; 

 &lt;div class="google-s-wrapper" &gt;
 &lt;div class="gcse-search"&gt;
 &lt;/div&gt; 
 &lt;/div&gt;
 &lt;/p:overlayPanel&gt; 
 &lt;/f:facet&gt;
 &lt;/p:menubar&gt;
&lt;/h:form&gt; 

</pre>




Re-styling the menubar for your PrimeFaces theme.



<pre class="brush:css">

// 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;
} 

</pre>




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.

Using Google Custom Search engine in PrimeFaces Overlay Panels