Skip to content Skip to sidebar Skip to footer
Home / Css / Google Search / Html

How To Include Google Search Result In My Specified Div Width And Height?

Post a Comment
css... #sea

Solution 1:

This is a sample which I have tried. try this.

<head><title>Search</title><style>#searchcontrol
    {
        margin-LEFT:500PX;
    }
</style><scriptsrc="https://www.google.com/jsapi"type="text/javascript"></script><scriptlanguage="Javascript"type="text/javascript">//<!
    google.load('search', '1');
    functionDoSearch() 
    {
        // Create a search controlvar searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());

        searchControl.draw(document.getElementById("searchcontrol"));

        // execute an inital search
        searchControl.execute(document.getElementById("secrchBox").value);
    }
    //]]></script></head><body><divid="searchcontrol"><inputtype="text"id="secrchBox"/><inputtype="button"value="Submit"onclick=" DoSearch()"/></div></body></html>

EDIT

<head><title>Search</title><style>#searchcontrol
    {
        margin-LEFT:500PX;
    }
</style><scriptsrc="https://www.google.com/jsapi"type="text/javascript"></script><scriptlanguage="Javascript"type="text/javascript">//<!
    google.load("search", "1", { "nocss": true });

    functionDoSearch() 
    {
        var ss = document.getElementById("secrchBox").value;
        // Create a search controlvar searchControl = new google.search.SearchControl();

        searchControl.addSearcher(new google.search.WebSearch());

        searchControl.draw(document.getElementById("searchcontrol"));

        // execute an inital search
        searchControl.execute(ss);
    }
    //]]></script></head><body><divid="searchcontrol"><inputtype="text"id="secrchBox"/><inputtype="button"value="Submit"onclick=" DoSearch()"/></div></body></html>

Now default css will not load. You can customize as your wish.

Solution 2:

you put the <iframe>, <script>, or whatever Google gives you inside your div!

<div id="searchResult">Google code here!</div>

Solution 3:

You may have three options. -The hardest one is to parse google result page. This could be done with php and some regular expressions work. If you are an experienced developer, this is the best.

-Second is to use googlesearch API. This one is very easy to implement. You can see how to do it here. It supports REST calls, which are super easy to use. Pros: Relatively easy to implement, lots of documentation and examples. Cons are that you have an usage quota of 100 queries per day. Also remember that you need to get your API-KEY and register to use it.

-Third one, Include an Iframe. This is super easy to implement, just one line of code, but it's not clean and probably you don't want to have google's page inside yours.

Probably there's another one mixing a lot of javascript and Iframes, but, I don't see the point of doing that since there are many better options.

Let me know if you have any questions..

Thanks!, @leo.

Post a Comment for "How To Include Google Search Result In My Specified Div Width And Height?"