Custom Search Engine - Search Element



Search Element:


The (CSE) Custom Search Engine appliance can be integrated into the Google Sites core system.This CSE appliance requires a result page/s.


The Custom Search Engine - Search Element works inline in a webpage without opening a new page. Site Search Results are displayed instantly via Ajax.




Search Element Example:


Once you have setup a Custom Search Engine  [CSE] you can add the following code to a Google Gadget and then embed the Search Element in Google Sites.

CSE Example: Custom Search Engine 

The Custom Search Engine ID and Inline Style Sheet/External CSS should be modified for your custom sites search and site style/design.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('00917536487642323469854:bhwkzol-tjc');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>

<link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
<style type="text/css">
.gsc-control-cse {
font-family: &quot;Trebuchet MS&quot;, sans-serif;
border-color: #E1F3DA;
background-color: #E1F3DA;
}
input.gsc-input {
border-color: #94CC7A;
}
input.gsc-search-button {
border-color: #94CC7A;
background-color: #AADA92;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #A9DA92;
background-color: #A9DA92;
}
.gsc-tabsArea {
border-color: #A9DA92;
}
.gsc-webResult.gsc-result {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b {
color: #0066CC;
}


}</style>

Inline CSS Control:


Use Inline CSS <style type="text/css"> to control colors and visibility etc. of the default CSE Search Element display. 

eg. remove tabs, hide 'powered by google', change button style etc..

Use !Important to forcibly override the default CSS style or linked Stylesheets where necessary.  

background-color: #FFFFFF !Important;
display: none !Important;

Most styles begin with .gsc- or .gs-, use your browsers element inspector to find the required ID or Class for your search element. 
See above. eg. .gsc-tabsArea etc.

CSE Element Callback:


Using the CSE element callback you can execute a function when the search is complete or starting.


CSE Callback Examples:

  • Search Complete
  • Search Starting


google.setOnLoadCallback(function(){
var CSEelement = new google.search.CustomSearchControl('009175364876030469854:bhwkzol-tjc');
CSEelement.setResultSetSize(google.search.Search.SMALL_RESULTSET);
CSEelement.draw('cse');

CSEelement.setSearchCompleteCallback(null, hideresultstext);
CSEelement.setSearchStartingCallback(null, hideresultstext);

CSEelement.setLinkTarget(google.search.Search.LINK_TARGET_PARENT);




CSE Advanced Search:


Using specific request parameters and advanced search parameters, you can control many aspect of the search output.



Direct Results: