Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET

Using Google Co-op's Custom Search Engine

Rate me:
Please Sign up or sign in to vote.
4.86/5 (23 votes)
19 Dec 2013CPOL5 min read 300K   5.8K   101   72
This article shows how easy it is to use ASP.NET and Google Co-op's Custom Search Engine to build your own search engine.

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. 

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:

  1. Return to the Google Co-op Custom Search Engine site’s home page (http://www.google.com/coop/cse).
  2. Click on the My Search Engines link.
  3. When the list of your custom search engines shows up, click on the link that says “Control Panel”.
  4. Next, click on the link that says “Code”.
  5. Select the radio button next to the option that says “Host a search box and search results on your own site…”.
  6. Also, specify the URL of the page on your site where you want the search results to appear.
  7. 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:

ASP.NET
<!-- 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.NET
<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:

ASP.NET
<!-- 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:

C#
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!

C#
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.
  • 2013-12-19: Removed the link to the live demo. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Sagara Software, Inc.
United States United States
Jon is a senior software developer who loves using .NET to solve problems.

When he's not fooling around with computers or reading, he's busy spending time with his super wife, Kelly, and his three boys. He also likes to take his mountain bike for a spin.

Visit my blog

Comments and Discussions

 
QuestionCould we apply it to MVC? Pin
Mohammad A. Amer26-Jun-14 0:08
professionalMohammad A. Amer26-Jun-14 0:08 
AnswerRe: Could we apply it to MVC? Pin
Ashish Shuklaa21-Jan-16 9:39
Ashish Shuklaa21-Jan-16 9:39 
Yes, we can implement Google custom search engine in MVC. Below is a step by step article to implement google custom search engine in MVC
Implement google custom search engine in ASP.Net MVC[^]
Questionerror Pin
Member 1063450228-Feb-14 20:23
Member 1063450228-Feb-14 20:23 
Questioncustomize output Pin
dafuq6-Jan-12 1:27
dafuq6-Jan-12 1:27 
AnswerRe: customize output Pin
Jon Sagara9-Jan-12 7:31
Jon Sagara9-Jan-12 7:31 
QuestionThanks Pin
Xmen Real 19-Jun-11 9:04
professional Xmen Real 19-Jun-11 9:04 
GeneralSearch Results on a Different Page? Pin
Christopher Irwin7-Jun-11 8:06
Christopher Irwin7-Jun-11 8:06 
GeneralRe: Search Results on a Different Page? Pin
Jon Sagara9-Jun-11 7:33
Jon Sagara9-Jun-11 7:33 
GeneralRe: Search Results on a Different Page? Pin
Christopher Irwin9-Jun-11 8:04
Christopher Irwin9-Jun-11 8:04 
GeneralIsValid is not declared Pin
vipernet027-Nov-10 15:28
vipernet027-Nov-10 15:28 
GeneralWidth of iframe too large Pin
anemiccolo1-Feb-10 10:05
anemiccolo1-Feb-10 10:05 
GeneralRe: Width of iframe too large Pin
Jon Sagara1-Feb-10 10:37
Jon Sagara1-Feb-10 10:37 
GeneralForms authentication and Google Custom Search Pin
Georg Kakasevski14-Jan-10 7:41
Georg Kakasevski14-Jan-10 7:41 
GeneralThanks! Pin
vegeta4ss10-Nov-09 5:09
vegeta4ss10-Nov-09 5:09 
GeneralSame as CodeProject CSE Pin
Anand@DotNet28-Jun-09 21:50
Anand@DotNet28-Jun-09 21:50 
GeneralWill target to our site only... Pin
Anand@DotNet28-Jun-09 20:26
Anand@DotNet28-Jun-09 20:26 
GeneralSearch page refreshing twice Pin
Ajay Matharu20-May-09 3:15
Ajay Matharu20-May-09 3:15 
GeneralRe: Search page refreshing twice Pin
Jon Sagara20-May-09 5:45
Jon Sagara20-May-09 5:45 
GeneralRe: Search page refreshing twice Pin
Ajay Matharu24-May-09 20:04
Ajay Matharu24-May-09 20:04 
GeneralSearch result opening again and again. Pin
Member 314438510-Feb-09 3:08
Member 314438510-Feb-09 3:08 
QuestionHow to get the Google watermark? Pin
David Moody14-Jan-09 5:20
David Moody14-Jan-09 5:20 
AnswerRe: How to get the Google watermark? Pin
ytzipp26-Feb-09 2:48
ytzipp26-Feb-09 2:48 
GeneralRe: How to get the Google watermark? Pin
boydd_uk16-Mar-09 23:49
boydd_uk16-Mar-09 23:49 
QuestionI have one question Pin
intsafi28-Oct-08 7:25
intsafi28-Oct-08 7:25 
QuestionHow it will be in vb.net? Pin
Kubulos9-Aug-08 0:20
Kubulos9-Aug-08 0:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.