Using Google Co-op's Custom Search Engine

Download source files - 4.17 KB

Sample Image - CustomSearchEngine.jpg

Introduction

This article shows how easy it is to create your own custom search engine using ASP.NET and Google Co-op’s Custom Search Engine feature.

Live demo (offsite, new window)

Creating Your Search Engine

The very first step you must take is to visit http://www.google.com/coop/cse. (Note that you must have a Google Account. If you don’t have one, ask around. GMail invites are a dime a dozen these days.) Once there, follow the instructions to create your custom search engine.

For this article, I used the following settings:

Sites to Search

Sites to search:	www.codeproject.com
How to search these sites:	Search only these sites.

Collaborate with others

Who can collaborate:

Only people I invite may contribute to this search engine.

Where to Host the Custom Search Engine

You have two options on how you can display your search engine to users: Google can host it for you, or you can host the search box and results on your site. For this article, I opted for the latter.

To configure this option:

Return to the Google Co-op Custom Search Engine site’s home page (http://www.google.com/coop/cse).
Click on the My Search Engines link.
When the list of your custom search engines shows up, click on the link that says “Control Panel”.
Next, click on the link that says “Code”.
Select the radio button next to the option that says “Host a search box and search results on your own site…”.
Also, specify the URL of the page on your site where you want the search results to appear.
Finally, after you select the location where you want to display the AdSense ads in your search results, click the Save Changes button.

Search Box Code and Search Results Code

On that same “Code” page in your custom search engine control panel, you will see two multi-line text boxes containing JavaScript code. The first contains a small form that contains your search box, the second is pure JavaScript that aids in the rendering of your search results.

Using the Google-generated Search Box Code Outside of the Server-side FORM Tag

You can use the search box code generated by Google, provided you place it outside of your web form’s server-side FORM tag. I tested this locally, and it worked beautifully. However, I’m sure I’m not alone in wanting the ability to put the search box somewhere inside the server-side FORM tag and still have my custom search engine operate correctly.

Using ASP.NET Server Controls and HtmlControls to Emulate Google's Search Box Inside the Server-side FORM Tag

I solved this problem by using ASP.NET server controls and HtmlControls to emulate the behavior of Google’s search box form, while still providing the server-side capabilities that we all know and love.

You’ll need to reference the search box JavaScript/HTML code from the Custom Search Engine control panel. I simply included it in my ASPX page in an HTML comment. This is what it looks like:

<!-- SAMPLE CODE ONLY - REPLACE WITH YOUR OWN -->
<!-- Google CSE Search Box Begins -->
<form id="searchbox_014373149466545347614:dygl7dqicp4" action="Default.aspx">
  <input type="hidden" name="cx" value="014373149466545347614:dygl7dqicp4" />
  <input name="q" type="text" size="40" />
  <input type="submit" name="sa" value="Search" />
  <input type="hidden" name="cof" value="FORID:9" />
</form>
<script type="text/javascript" 
  src="http://www.google.com/coop/cse/brand?form=
       searchbox_014373149466545347614%3Adygl7dqicp4"></script>
<!-- Google CSE Search Box Ends -->

You’ll need four ASP.NET controls to mimic the functionality of this form:

A HiddenField control to mimic cx
A TextBox control to mimic q
Another HiddenField control to mimic cof
A Button control to mimic sa

I also added a RequiredFieldValidator to prevent postbacks from happening when the user tries to submit the search query with an empty TextBox.

Here are the control declarations from the ASPX file:

<asp:TextBox ID="q" MaxLength="512" Width="275px" AutoPostBack="false" runat="server" />
<asp:Button ID="_btnSearch" Text="Google Search" 
     OnClick="_btnSearch_Click" runat="server" />
<asp:RequiredFieldValidator ID="_rfvQ" ControlToValidate="q" runat="server" />

<asp:HiddenField ID="cx" Value="014373149466545347614:dygl7dqicp4" runat="server" />
<asp:HiddenField ID="cof" Value="FORID:9" runat="server" />

The “dummyHidden” Input Control

You’ll notice in the ASPX page that there is a plain HTML input control called dummyHidden that is never visible to the user. This is necessary in order to force the search button’s Click event to fire on the server side when the search text box has focus and the user hits the Enter key. This only works when there are two or more text boxes in the form. Based on my research, this appears to be an Internet Explorer-specific problem, and it was the only available workaround I could find. If you have a better solution, please let me know.

Finally, you’ll need to copy the SCRIPT include and place it somewhere in your ASPX page.

The Search Results

For this article, the search results are displayed on the same page as the search box. No ASP.NET emulation is necessary here. Simply copy the JavaScript code and paste it into your ASPX file where you want the search results to appear. Here is what it looks like in my ASPX file:

<!-- SAMPLE CODE ONLY - REPLACE WITH YOUR OWN -->
<!-- Google Search Result Snippet Begins -->
<div id="results_014373149466545347614:dygl7dqicp4"></div>
<script type="text/javascript">
  var googleSearchIframeName = "results_014373149466545347614:dygl7dqicp4";
  var googleSearchFormName = "searchbox_014373149466545347614:dygl7dqicp4";
  var googleSearchFrameWidth = 600;
  var googleSearchFrameborder = 0;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" 
  src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google Search Result Snippet Ends -->

Code-behind: Button.Click

This is where the magic happens. Mercifully, Google uses the GET method to send form data, so we merely need to append our search parameters to the query string and redirect the user to the search results page. For this article, that means simply redirecting the user back to the same page, though the results could easily be displayed on a separate physical page.

The search query from the q TextBox and the HiddenField values are all needed in the query string. See the code below:

protected void _btnSearch_Click (Object sender, EventArgs e)
{
    if (!IsValid)
        return;

    Response.Redirect (
        String.Format(
            "Default.aspx?q={0}&cx={1}&cof={2}",
            HttpUtility.UrlEncode (SanitizeUserInput (q.Text.Trim ())),
            HttpUtility.UrlEncode (cx.Value),
            HttpUtility.UrlEncode (cof.Value)
            ),
        false
        );

    Context.ApplicationInstance.CompleteRequest ();
}

Important: Be sure to take the time to sanitize and URL-encode the user’s input. I have provided a basic function for doing so, but it is your responsibility to ensure that your applications are safe.

Code-behind: Page.Load

The last bit of code is in the page’s Load event handler. All it does is look for the querystring parameter q, and if it exists, it puts that value in the TextBox q so that the user can see the term for which they last searched. Note that this only happens when the request is not a postback. Because of the redirect, we can’t use ViewState to keep track of the last search term.

Again: Remember to sanitize all user input. Your application’s safety is your responsibility!

protected void Page_Load (Object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        String query = Request.QueryString["q"];
        if (!String.IsNullOrEmpty (query))
        {
            q.Text = SanitizeUserInput (HttpUtility.UrlDecode (query.Trim ()));
        }
    }
}

Conclusion

Well, there you have it. With one simple ASP.NET form, we have created a custom search engine that searches only pages on The Code Project. Google Co-op has done an extraordinary job in making this such a simple task for us end users.

History

2006-10-27: Initial release.

You must Sign In to use this message board.


Per page

Width of iframe too large
anemiccolo

11:05 1 Feb '10

I can't find anyway to make the iframe smaller or edit the way my results look for that matter. How can I use Google's CSE and customize how my results look?
Sign In·View Thread·PermaLink

Re: Width of iframe too large
Jon Sagara

11:37 1 Feb '10

anemiccolo,

It has been quite some time since I played with Google CSE, so I apologize that I am unable to provide more help other than a link to Google's CSE docs:

http://code.google.com/intl/en/apis/customsearch/docs/ui.html[^]

Best of luck,

Jon Sagara
Some see the glass as half-empty, some see the glass as half-full. I see the glass as too big.
-- George Carlin
.NET Blog | Personal Blog | Articles

Forms authentication and Google Custom Search
Georg Kakasevski

8:41 14 Jan '10

Hi Jon, do you now how to implement Google Custom Search Engine in ASP.NET application where users must be authenticated (using Forms authentication)? www.masterint.mk
Sign In·View Thread·PermaLink

Thanks!
vegeta4ss

6:09 10 Nov '09

This article was exactly what I was looking for. Thanks for sharing!
Sign In·View Thread·PermaLink

Same as CodeProject CSE
Anand@DotNet

22:50 28 Jun '09

I need exact search as codeproject cse has, in this sample application when i enter the search string it will search in its own site, i also want the same search engine that will work for only my site. guys plz help me out, all things are done, but still it search in google index not mine.
Sign In·View Thread·PermaLink	2.00/5

Will target to our site only...
Anand@DotNet

21:26 28 Jun '09

i have create and configured the CSE for my site, but when i search for a keywords it will perform world wide search rather than to my site pages, how can i restrict search to my site only?
Sign In·View Thread·PermaLink

Search page refreshing twice
matharuajay

4:15 20 May '09

Hi guys, When I search for any keyword, the result page refreshes twice. The result is shown and the search result page refreshes again 2nd time then stables down. Any one has an idea on why does it refreshes second time? Thanks in advance. Thanks, Ajay Matharu http://www.ajaymatharu.com
Sign In·View Thread·PermaLink

Re: Search page refreshing twice
Jon Sagara

6:45 20 May '09

I received this email from a reader a while back -- it may solve your problem:

---------
Jon,

I may have stumbled across the answer. I added this line to your search results snippet:

var googleSearchResizeIframe = false;

And that not only removed the refresh that IE7 was forcing, but it also seems to have resolved the issue I had with the page links breaking after the first click.

Just wanted to share that, in case you were planning to update your tutorial or someone else noodges you like I've been noodging you.

Thanks,
David
---------

Jon Sagara
Some see the glass as half-empty, some see the glass as half-full. I see the glass as too big.
-- George Carlin
.NET Blog | Personal Blog | Articles

Re: Search page refreshing twice
matharuajay

21:04 24 May '09

Jon, That helped thanks a lot. Regards, Ajay Matharu http://www.ajaymatharu.com
Sign In·View Thread·PermaLink

Search result opening again and again.
Member 3144385

4:08 10 Feb '09

Hi, You have created very good work, but I have arised a problem of opening search result again and again in IE, but not in Safari, and Mozilla. Could you and anybody can tell me, what is the problem? Balwant Sr. Software Engineer. Hi, We proud that we are indian
Sign In·View Thread·PermaLink

How to get the Google watermark?
David Moody

6:20 14 Jan '09

Any idea how to make the Google watermark inside the search box? I've tried several different things but I think ASP.NET is blowing them out of the water. Thanks, David
Sign In·View Thread·PermaLink

Re: How to get the Google watermark?
ytzipp

3:48 26 Feb '09

Hi David,

To get google watermark this is what you should do:

Replace the line

<script type="text/javascript"
src="http://www.google.com/coop/cse/brand?form=searchbox_014373149466545347614%3Adygl7dqicp4"></script>

in the following code (which atually based on the code retrieved from google):

<script type="text/javascript">
(function() { var q = document.getElementById('<%= q.UniqueID %>'); if (q) { var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(http://www.google.com/coop/images/google_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = '#ffffff'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
</script>

and that's it!!!

Re: How to get the Google watermark?
boydd_uk

0:49 17 Mar '09

This works fine, but one problem. If you web site uses https secure pages as well as http pages, you get that really annoying message do you want to display unsecured items, etc. Anyway around this. In asp.net code I have a fixURL procedure that deals with the swapping of http/https? Not sure how I do this in javascript.
Sign In·View Thread·PermaLink

I have one question
intsafi

8:25 28 Oct '08

your code work very well and thank you so much but I have one question: can we put this (Google Co-op's Custom Search Engine) in more than one page and every page searches in one different site? and thanks again
Sign In·View Thread·PermaLink

How it will be in vb.net?
Kubulos

1:20 9 Aug '08

Please, can you write this example in vb.net? Tnx very much!
Sign In·View Thread·PermaLink	2.00/5

Re: How it will be in vb.net?
Nika Asgari

3:06 7 Sep '08

http://labs.developerfusion.co.uk/convert/csharp-to-vb.aspx you can use this address it convert C# codes to Vb.net Nika Asgari
Sign In·View Thread·PermaLink

Thanks
snashter

6:59 26 Jan '08

Good article. This really helped me out. I have my page loading twice, but I will follow the instructions left by others.
Sign In·View Thread·PermaLink

Another way of doing it is Javascript
YanDav

22:31 24 Jan '08

HTML CODE / GOOGLE CODE


<input type="text" name="q" size="30" onkeypress="onEnter();"/>
<input type="button" onclick="search();" name="sa" value="Search" />
<input type="hidden" name="cx" value="YOUR CX VALUE" />
<input type="hidden" name="cof" value="YOUR COF VALUE" />

<input name="dummyHidden" value="" style="visibility:hidden;display:none;" />


I needed to make some changes in the google script and then change the src to it:

(function() { var q = document.getElementById('q'); if (q) { var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(images/google_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = '#ffffff'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

<script type="text/javascript" src="scripts/googleCSE.js"></script>

// call the google search
function search()
{
var q = $get("q");
var cof = $get("cof");
var cx = $get("cx");
location.href = "Default.aspx?q=" + encodeURIComponent(q.value) + "&cof=" + encodeURIComponent(cof.value) + "&cx=" + encodeURIComponent(cx.value)
}

// for setting the search term back in the textbox call this function on page load
function setSearchTerm()
{
var q = $get("q");
var regEx = new RegExp("([^?=&]+)(=([^&]*))?");
var m = regEx.exec(location.search);

if (m && m[0] && m[0,3])
q.value = decodeURIComponent(m[0,3]);
else
q.value = "";
}

// to apply a search when enter is pressed
function onEnter()
{
if (event.keyCode == 13)
{
search();
}
}

Keep redirecting to result page after click Back button
kunthea

0:30 17 Jan '08

I placed the mimic code in my website www.dddn.biz, it works perfect. When I search something, it redirects to new page to display the results. However there is a problem when I click back button on the browser it keeps redirecting to the result page..... How could I stop the redirecting after I click Back botton on the IE browser? Thanks, Kunthea modified on Sunday, February 10, 2008 11:38 PM
Sign In·View Thread·PermaLink

Thanks!
abidur

7:48 9 Jan '08

This is an excellent article. Saved a lot of time for me. Thanks a lot!
Sign In·View Thread·PermaLink

can we modify code?
pravin parmar

0:11 29 Nov '07

hi, i have read on google site that, it says that, do not modify any code.. or your account will be disabled ! now we have try here to modify the searchbox code. will my adsense account will be disabled? i m afraid of using this code. so pls resolve my confusion so that i can use this wonderful code ! thanks in advance ! Pravin Parmar, PravinParmar.ce@gmail.com
Sign In·View Thread·PermaLink

Thank You!
FlashSand

11:24 4 Oct '07

Looked everywhere. Even contacted a "real" person at Google Enterprise Technical Support. No one could help. Your solution works great! Thanks!
Sign In·View Thread·PermaLink

Search works only for first time only
Aamir Bashir

21:55 12 Sep '07

Thanks for the very helpful article.

I am using search in my personal website. Whenever I search something, search results page flicker two times. Means search results are displayed once and page refreshes again.

2nd issue is search works only first time. For example I search for "yahoo" when I open the page first time, and later I search "Hotmail" it always shows the search results against keyword "Yahoo".

Anybody help please !

Aamir Bashir

Problem with code
The Apocalypse

0:58 8 Aug '07

I am writing this code in VB and can't figure out how to use SanitizeUserInput. Can someone please help. i am new to .net. my code is below:

Protected Sub _btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnSearch.Click

If Not Page.IsValid = True Then

Exit Sub

Else

Response.Redirect(String.Format("Search.aspx?q={0}&cx={1}&cof={2}", HttpUtility.UrlEncode(SanitizeUserInput(q.Text.Trim())), HttpUtility.UrlEncode(cx.Value), HttpUtility.UrlEncode(cof.Value)), False)
Context.ApplicationInstance.CompleteRequest()

End If

End Sub

Thanks

Re: Problem with code
Jerode

11:22 27 Sep '07

The authors version of the function is:

Private Function SanitizeUserInput(ByVal text As String) As String
            If String.IsNullOrEmpty(text) Then
                  Return String.Empty
            End If

            Dim rxPattern As String = "<(?>""[^""]*""|'[^']*'|[^'"">])*>"
            Dim rx As New Regex(rxPattern)
            Dim output As String = rx.Replace(text, String.Empty)

            Return output
End Function