Google Product Forums

Changing the look and feel beyond the WYSIWYG


Chazari May 3, 2012 12:18 PM
Posted in group: Google Custom Search

Categories: Implementation :

I need to have a search form on every page that includes auto-completion but has a specific look and feel including text search field background color, border, button image, padding, height, etc. I can do it as a simple form like

<form action="http://www.mysite.com/search" id="googleSearchArea" method="get">
       
<input type="hidden" name="cx" value="my id:1sc26mxgi04" /><input type="hidden" name="cof" value="FORID:10" /><input type="hidden" name="ie" value="UTF-8" />
       
<input type="search" id="cse_search" class="googleSearch" name="q" value="" placeholder="Search" /><input type="submit" class="googleBtn" name="submitBTN" value="" />
   
</form>ww

But I can't get the auto-complete on that unless I use 3rd party code which doesn't quite do what I need and doesn't have all the results when I implement auto-complete with the WYSIWYG. However, I can't seem to style the google code like

<div id="cse-search-form">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 customSearchOptions = {};
       
var imageSearchOptions = {};
        customSearchOptions
['enableImageSearch'] = true;
        customSearchOptions
['imageSearchOptions'] = imageSearchOptions;
       
var customSearchControl = new google.search.CustomSearchControl(
         
'my id:1sc26mxgi04', customSearchOptions);
        customSearchControl
.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
       
var options = new google.search.DrawOptions();
        options
.setAutoComplete(true);
        customSearchControl
.setAutoCompletionId('my id:1sc26mxgi04+qptype:1');
        options
.enableSearchboxOnly("http://www.mysite.com/search");
        customSearchControl
.draw('cse-search-form', options);
     
}, true);
   
</script>


beyond the basics using CSS

What am I missing? Is there away to get the best of both worlds (e.g. use the google custom search code but customize the heck out of it)?