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)? |