Search code examples
htmlcssgoogle-search

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


Solution

  • 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.