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????

回答1:

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.

回答2:

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

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

回答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.

来源：https://stackoverflow.com/questions/15262020/how-to-include-google-search-result-in-my-specified-div-width-and-height

标签

html

css

google-search