CODEWITHSUNDEEP
javascripthtmlajaxjquery
Jacob Anthony Tonna
Jacob Anthony Tonna

Reputation: 525

Auto Google Search Results On My Website

I'm making a website. When you click on my search box and type you click search and then it takes you to google.com with search results how would i use ajax to display results in a frame as you type?.when u search on http://google.com the text you type brings up results by its self without pressing search how can i do this? Here is my html snippet 

<div class='search'>
<form method="get" id='search' action="http://www.google.com/search">
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" />
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." />
</div>

I have alot of css behind it to make the text box enlarge and change color. Here is the snippet just in case it's relevant.

#search input[type="text"] {
background: url(imgs/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2)   inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
outline: none;
}

#search input[type="text"]:focus {
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 175px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
outline: none;
}
div.search
{
position:fixed;
top:8px;
right:5px;
}

so how would i make an ajax frame that displays google search results as you type? i know nothing about ajax i dont know how to start a line of code with it ither so please explain in depth

*side note sorry if website looks bad im 13

Upvotes: 1

Views: 3955

Answers (3)

Stephen
Stephen

Reputation: 603

Without knowing JavaScript you are pretty well stuck, I recommend learning it first. w3schools.com would be a good place.

Google no longer lets you use their website through an iframe, so I recommend using startpage.com as their results pull from google.com

The simplest way that I can think of to do it is something like this (in this example I use the mobile version of the website as it embeds better.): http://jsfiddle.net/A8M4r/

<!DOCTYPE html>
<html>
<head>
<script>
function querify(query) {
    return query.split(" ").join("+") // replaces spaces with +s for url
}
function updateIframe(query) {
    query = querify(query);
    var i = document.getElementById("searchResults");
    var searchEngine = "http://startpage.com/do/m/mobilesearch/?q=" 
    var yourSiteToSearch= "site:example.com+"
    i.src = searchEngine + yourSiteToSearch + query;
}
</script>
</head>
<body>
   <input oninput="updateIframe(this.value)" type="text">
   <iframe id="searchResults" height="100%" width="100%">
</body>

Hope this helps!

P.S. If you would like one where the iframe only pops up when the user clicks on the search box there is one here: jsfiddle.net/4EDUK

Upvotes: 1

Javier Brooklyn
Javier Brooklyn

Reputation: 634

If you want a custom autocomplete in jQuery you may use one like jQuery Autocomplete where you would have to define the autocomplete values with an array or remote file.

Else Google Custom Search enables you to use autocomplete through a search box with attribute parameters provided by Google. Here is a webpage that would help you with it - http://www.theblog.ca/autocomplete-google-custom-search-input-field

Upvotes: 0

sajawikio
sajawikio

Reputation: 1514

$(window).load(function()
{
    var opts = 
    {
       url: "http://www.google.com/search?q=" + $("#mysearchInput").val(),
       success: function(data)
       {
           //parse the results which are in variable "data". 
           //You're going to need to analyze the results yourself
           //and parse it yourself, in whatever way you want to

           var myresults = "my example results here";
           $("#myiframe").append(myresults);
       }
    }

    $.ajax(opts);
});

Upvotes: 0

Related Questions