使用Google建议使用JavaScript

Question

我想将Google搜索的自动完成/建议功能添加到HTML页面的输入中。

如果我打开一个URL像这样与Firefox：

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

它下载这样的文件：

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

我怎样才能做到这一点在JavaScript？我想获得一个结果数组。

//编辑：这是我试过的代码：

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

创建一个空的警报。

Answer 1

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.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fen.wikipedia.org%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.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fsuggestqueries.google.com%2Fcomplete%2Fsearch%3Fclient%3Dfirefox%26q%3D"+ 
    encodeURIComponent(term)+ 
    "%22%20&format=json&callback=getQueryGoogle."+id); 
} 

//用法示例（谷歌）：

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" 
] 

//例2（维基百科）

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" 
] 

Answer 2

不知道你会什么的但像@Ejay在他的评论说，你可以这样做：

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.com/complete/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]); 
    } 
} 

但我做了一些jsfiddle测试，并证实了dandavis说你不能Ajax请求到那个页面。

Answer 3

你可以使用这样的事情，它采用了谷歌搜索网址，结合YQL和jQuery UI autocomplete

HTML

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

的Javascript

$(function() { 
    $("#search").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fsuggestqueries.google.com%2Fcomplete%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 
    }); 
}); 

在jsfiddle

我没有写所有在这里的香草jQuery的东西JavaScript，因此你可以使用它作为一个概念证明的时间。但说实话，这是我实际上使用jQuery和jQuery UI而不是重新发明轮子的时代之一。当然还有其他第三方库可以为你做类似的事情。而且，如上所述，您可以通过更改YQL搜索网址来为自动填充使用不同的来源。