CODEWITHSUNDEEP
htmlcssgoogle-search
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

How to include google search result in my specified div width and height?

<input type="text" name="q" placeholder="Search..." />
<input type="image" src="images/searchBtn.png" name="q" />
<div id="searchResult"></div>

css...

#searchResult{width: 1000px; height: 200px;}

How to do????

Upvotes: 0

Views: 2262

Answers (3)

New Developer
New Developer

Reputation: 3305

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

<head>
<title>Search</title>

<style>
    #searchcontrol
    {
        margin-LEFT:500PX;
    }
</style>

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

<script language="Javascript" type="text/javascript">
    //<!
    google.load('search', '1');
    function DoSearch() 
    {
        // Create a search control
        var 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>
    <div id="searchcontrol">
        <input type="text" id="secrchBox"/>
        <input type="button" value="Submit" onclick=" DoSearch()"/>
    </div>
</body>
</html>

EDIT

<head>
<title>Search</title>
<style>
    #searchcontrol
    {
        margin-LEFT:500PX;
    }
</style>

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

<script language="Javascript" type="text/javascript">
    //<!
    google.load("search", "1", { "nocss": true });

    function DoSearch() 
    {
        var ss = document.getElementById("secrchBox").value;
        // Create a search control
        var 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>
    <div id="searchcontrol">
        <input type="text" id="secrchBox"/>
        <input type="button" value="Submit" onclick=" DoSearch()"/>
    </div>
</body>
</html>

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

Upvotes: 1

lemil77
lemil77

Reputation: 341

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.

Upvotes: 0

syrkull
syrkull

Reputation: 2344

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

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

Upvotes: 0

Related Questions