2

HTMLページの入力にGoogle検索のオートコンプリート・サジェスト機能を追加したい。

このような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);

これにより、空のアラートが作成されます。

4

3 に答える 3

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.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 );
}

// 使用例 (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"
]

//例 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"
]
于 2013-05-06T21:12:38.870 に答える
4

このようなものを使用できます.YQLとjQuery UIオートコンプリートを組み合わせたGoogle検索URLが組み込まれています

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 を使用したいときの 1 つです。もちろん、同様のことができるサードパーティのライブラリは他にもあります。また、上記のように、YQL 検索 URL を変更することで、オートコンプリートに別のソースを使用できます。

于 2013-05-07T00:11:12.167 に答える