Google Custom Search with custom search box and button?

Question

I am trying to make a Google custom search (I just need some sort of search engine on my site), and I need to make it so that I can use my own search box (input field). I need it to be of exact size. I also need to be able to make my own button to search. I am going to need to be able to change the size and background of the search button. I am not completely sure yet, but I might actually need it to be a regular img.

Does anyone know how to do this?

If you cannot do this with Google, do you know of another way to do it?

If there is no other way besides using your own search engine, can I please get a link to a very simplified tutorial on how to make my own. I am willing to put in the extra work to learn, but I tried a bit, and after looking at three different tuts, I gave up because they were very very long and confusing. I hope I was just looking in the wrong places.

Mag

Answer 1

Here is the one I am using, you just need to add some styles to <input id='q' which is the search box, and <input value='MyButton' is the button to click

<!-- Google CSE Search Box Begins  -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
  <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
  <input value="FORID:11" name="cof" type="hidden"/>
  <input id="q" style="width:600px;" name="q" size="75" type="text"/>
  <input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....

Edit: Above is my answer from 2010, I cannot confirm it is working or not anymore, but here is the one working.

<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('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

For more info: refer to https://developers.google.com/custom-search/docs/js/cselement-devguide

Phloem

And what are those XXXXX and YYYYYYY ? – Dalmatia

those XXXX and YYYYY are the numbers defined in the code you get from Google Custem Search. – Fascism

@MatthewLock, I am not sure my original answer from 2010 working, but added ajax one, which should work now. – Phloem

Answer 2

For Googlers who are looking for a solution with new "Overlay Results" option under "Look and Feel" . I used YOU's answer and added some minor hacks to make it work. Basic idea is get the code Google gives you, hide Google's search box and button, and use YOU's answer with the proper XXXXX:YYYY codes. While hiding <gcse:search></gcse:search>" do not use display:none otherwise search results will not work.

<script>
    (function() {
    var cx = 'XXXXXXXXXX:YYYYYYYYY';
    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>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
    <gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="" name="q" size="75" type="text"/>
    <button class="btn">Search</button>
</form>

Fascism

Hi. This is causing page reload, takes long time and appends some characters to the url. Can you tell a way out to get results just like the code copied from google, as the way you are doing is exactly what i want except for the above factors – Sassy