Google Custom Search is a service provided by Google using which we can add a customized search feature to our website . Steps to get this are pretty simple and are summarized below .

1.First task is to goto http://www.google.com/cse/ and login using google account .

2.On the right side you will get a link to create a new custom search engine. Clicking that will be followed up by some simple steps asking for name,description,site to search and other details . On selecting edition option you can go for either of the “standard edition” which is free of cost or “Site Search” which is paid . Of course paid version has some of it’s own benifits like optional ads on result pages .

3.Next you will be asked to customize style of your search box and result display . Any way here you will get limited options do design the style but if you have some knowledge of css and know how to play with firebug  you can take the style customization of the search box and result display to a totally new level . We will talk about his in later steps .

4.Now it’s time to get the code for whole thing and implement it’s basic functionality and design in your own website code . Simply pasting the code to your website page will do the magic .

Above steps will help you to create a normal search engine but you may want modify it to suit your design and functionality requirement . Below given are some more steps for that .

Generated code points to custom search engine situated under your google account . The code is like this carrying a unique id look like this :

var customSearchControl = new google.search.CustomSearchControl('009001389815471399586:r5_********', customSearchOptions);

ID here is the long alphanumeric string .

To do more modifications to design go to the “Get code” tab . At the bottom there is a link for downloading css source file . Download the file and copy paste the css code the css file of your webpage . Now you can modify the existing css as you want . In firebug if you see some class on the search box or result and don’t find it in the downloaded css just copy paste the class with required changes to your own css file .

The Google Custom search comes with google logo placed on box and on result page . Adding the below code to your css will remove them .

.cse input.gsc-input, input.gsc-input
    {
        background-image: none !important;
    }

You can also add refinement tags or autocompletion property by going to the control panel of the custom search engine at http://www.google.com/cse/ .

If you want to modify the html part of the Search System you need to add “customSearchControl.setSearchCompleteCallback” function before “customSearchControl.draw(‘cse’);” . Below is the code for function . Inside the function you can use normal jquery code to access and manipulate the HTML code .

customSearchControl.setSearchCompleteCallback(this, function (control, searcher) {
                searcher.clearResults();
 
                //Write your code here
 
                searchReturned = true;
            });

You can modify the html by getting elements using the class names and add your changes to them .
For example i need to add ‘Pages:’ text before the page numbers at the bottom . So here is the code for that :

$(".gsc-cursor").prepend("<span style='font-weight:bold;' class = 'page'>Pages : &nbsp; </span>");

Here “gsc-cursor” is class name of the div holding the page numbers at bottom .You can get the class names by using the firebug .

You can also modify the click function of the search button by using the code below :

$(".gsc-search-button").live("click", function () {
 //for example here i am getting presnet value from the search text box
                var abc = $("#gsc-i-id1").val();
                alert(abc);
            });

In a similar fashion many things can be modified and manipulated in the original code as per need .