html - Use Google Suggest with JavaScript - Stack Overflow

admin管理员组

文章数量:1346324

I want to add the autoplete / suggest feature of the Google Search to an input in a HTML page.

If I open a URL like this with Firefox:

suggestqueries.google/plete/search?client=firefox&q=stacko&callback=abc

It downloads a file like this:

["stacko",["stackoverflow","stackoverflowerror","stackoverflowexception","stackops","stackoverflow api","stackoverflow careers","stackoverflow java","stackoverflow deutsch","stackoverflow wiki","stackoverflow reputation"]]

How can I do this in JavaScript? I want to get an array with the results.

// Edit: Here is my tried code:

var txtFile = new XMLHttpRequest();
txtFile.open("GET", ";q=stacko&callback=abc", true);
txtFile.onreadystatechange = function() {
    text = txtFile.responseText;
    alert(text);
}
txtFile.send(null);

This creates an empty alert.

I want to add the autoplete / suggest feature of the Google Search to an input in a HTML page.

If I open a URL like this with Firefox:

suggestqueries.google./plete/search?client=firefox&q=stacko&callback=abc

It downloads a file like this:

["stacko",["stackoverflow","stackoverflowerror","stackoverflowexception","stackops","stackoverflow api","stackoverflow careers","stackoverflow java","stackoverflow deutsch","stackoverflow wiki","stackoverflow reputation"]]

How can I do this in JavaScript? I want to get an array with the results.

// Edit: Here is my tried code:

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://suggestqueries.google./plete/search?client=firefox&q=stacko&callback=abc", true);
txtFile.onreadystatechange = function() {
    text = txtFile.responseText;
    alert(text);
}
txtFile.send(null);

This creates an empty alert.

• javascript
• html
• autoplete

Share Improve this question Follow edited May 6, 2013 at 22:21 Toast asked May 6, 2013 at 20:57 ToastToast 65844 gold badges2121 silver badges4343 bronze badges 7

• 2 You can use events like onkeyup and onkeydown on your input element, validate input and then make an ajax call to the suggestqueries.google.... URL, parse the response and manipulate DOM to display suggestions. And any time you get stuck, post your tried code here along with description of the problem, and your problem will be solved in minutes :) – Ejaz Commented May 6, 2013 at 20:59
• 1 Might want to look into jQuery UI's Autoplete. – Dom Commented May 6, 2013 at 21:00
• @Ejay My problem is just to get the suggestions from Google. The question is not about the UI. Would be ok to show an alert with the suggestions. – Toast Commented May 6, 2013 at 21:05
• @Ejay I updated the question with my code. – Toast Commented May 6, 2013 at 21:09
• 1 they don't use CORS, so you can't ajax that google page. – dandavis Commented May 6, 2013 at 21:23

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 6

function addScript(u){ 
   var s=document.createElement('script'); 
  s.src=u;  
  document.getElementsByTagName('*')[1].appendChild(s);
 }


function getQueryWiki(term, callback){    
   var id="i"+Math.random().toString(36).slice(2);
   getQueryWiki[id]=function(data){ callback(data); delete getQueryWiki[id];};
   addScript( "http://query.yahooapis./v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fen.wikipedia%2Fw%2Fapi.php%3Faction%3Dopensearch%26search%3D"+
   encodeURIComponent(term)+
  "%26namespace%3D0%22%20&format=json&callback=getQueryWiki."+id );
}


function getQueryGoogle(term, callback){
   var id="i"+Math.random().toString(36).slice(2);
   getQueryGoogle[id]=function(data){ callback(data); delete getQueryGoogle[id];};
   addScript( "http://query.yahooapis./v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fsuggestqueries.google.%2Fplete%2Fsearch%3Fclient%3Dfirefox%26q%3D"+
   encodeURIComponent(term)+
  "%22%20&format=json&callback=getQueryGoogle."+id );
}

//example usage (google):

getQueryGoogle("obam", function(d){
  alert(
     JSON.stringify(
          d.query.results.json.json[1].json,
          null,
          "\t"
     )
  );
});

// displays:

[
    "obama",
    "obamacare",
    "obama immigration",
    "obama phone",
    "obama gun control",
    "obama immigration reform",
    "obama impeachment",
    "obama approval rating",
    "obama net worth",
    "obama speech"
]

//example 2 (wikipedia)

getQueryWiki("obam", function(d){
  alert(
     JSON.stringify(
          d.query.results.json.json[1].json,
          null,
          "\t"
     )
  );
});

//shows:

[
    "Obama",
    "Obama administration",
    "Obamacare",
    "Obama-Biden Transition Project",
    "Obama, Fukui",
    "Obama stimulus plan",
    "Obama Line",
    "Obama for America",
    "Obama Domain",
    "Obama Republican"
]

You could use something like this, it incorporates the Google search URL, bined with YQL and jQuery UI autoplete

HTML

<div class="ui-widget">
    <input id="search" />
</div>

Javascript

$(function () {
    $("#search").autoplete({
        source: function (request, response) {
            $.ajax({
                url: "http://query.yahooapis./v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fsuggestqueries.google.%2Fplete%2Fsearch%3Fclient%3Dfirefox%26q%3D" + encodeURIComponent(request.term) + "%22&format=json",
                dataType: "jsonp",
                success: function (data) {
                    response(data.query.results.json.json[1].json);
                }
            });
        },
        minLength: 2
    });
});

On jsfiddle

I don't have the time to write all the jquery stuff here in vanilla javascript, so you can use it as a proof of concept. But to be honest this is one of those times that I would actually use jquery and jquery UI rather than reinvent the wheel. There are of course other 3rd party libraries out there that could do a similar thing for you. And, as above you could use different sources for the autoplete by changing the YQL search URL.

Not sure exactly what your going for but like @Ejay said in his ments you could do this:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
           //parse the response object
           parse_the_text(xhr.responseText);    
        }
    }else{
      return;
    }
}

var url = "http://suggestqueries.google./plete/search?client=firefox&q=stacko";

xhr.open('Get', url, true);
xhr.send(null);

function parse_the_text(google_array){
    for(var i = 0; i < google_array[1].length; i++){  //this is dirty as it relies on response object never changing
        alert(google_array[1][i]);
    } 
}

But I did some testing on jsfiddle and it confirms what dandavis said you can't ajax request to that page.

本文标签： htmlUse Google Suggest with JavaScriptStack Overflow