When I first replaced the default search feature on the site with Google Custom Search, it didn't work. Then I realised that you cannot have nested form tags. It seems that the outer form tag will be processed, which will usually be one belonging to ASP .NET.
To fix this issue, you will need to modify the code snippet for the custom search box to remove the form tag. Below is the code snippet for my custom search.
1 <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
2 <div>
3 <input type="hidden" name="cx" value="partner-pub-0354492030673990:tekp9o-wjsk" />
4 <input type="hidden" name="ie" value="ISO-8859-1" />
5 <input type="text" name="q" size="25" />
6 <input type="submit" name="sa" value="Search" />
7
8 </div>
9 </form>
10 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
The following is done to cater for the above functionality within an asp .net FORM tag.
1. Remove the FORM tag and replace it with a DIV. We will use javascript to execute the search.
3. Replace the INPUT button with a BUTTON, A or anything that can have an onclick attribute to execute the javascript for search
4. Leave the INPUT text box but at an onkeydown event handler to prevent postback and to execute the search when enter is pressed.
5. Remove the external javascript reference for rendering the watermark as it is useless now. We update the code and do it locally.
6. Remove the hidden fields as we will attach the fields to the search query string instead.
7. Create the necessaary javascript functions.
The end result is the final piece of code below
1 <div id="cse-search-box">
2 <button class="switcher" onclick="googlesearch();return false;">
3 </button>
4 <input id="q" type="text" size="31" style="border: solid 1px #999999" onkeydown="searchkeydown();" />
5</div>
6
7<script type="text/javascript">
8 window.onload = function() {
9 var f = document.getElementById('cse-search-box');
10 if (f) {
11 var q = document.getElementById('q');
12 var n = navigator;
13 var l = location;
14 if (n.platform == 'Win32') {
15 q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;';
16 }
17 var b = function() {
18 if (q.value == '') {
19 q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat';
20 }
21 };
22 var f = function() {
23 q.style.background = '#ffffff';
24 };
25 q.onfocus = f;
26 q.onblur = b;
27 if (!/[&?]q=[^&]/.test(l.search)) {
28 b();
29 }
30 }
31 }
32 searchkeydown = function() {
33 if (window.event) {
34 key = window.event.keyCode; //IE
35 }
36 else {
37 key = e.which; //firefox
38 }
39 if (key == 13) {
40 event.returnValue = false;
41 event.cancel = true;
42 googlesearch();
43 }
44 }
45
46 googlesearch = function() {
47 window.open('http://www.google.com/cse?q=' + escape(document.getElementById('q').value) + '&ie=ISO-8859-1&cx=partner-pub-0354492030673990:tekp9o-wjsk');
48 }
49 </script>
The above will open the search result page in a new window.