Question

Google suggestions are put online as an XML sheet, for instance these are suggestions for the word stack: XML results by Google. Here’s a truncated version:

<toplevel>
  <CompleteSuggestion>
    <suggestion data="stack overflow"/>
    <num_queries int="25200000"/>
  </CompleteSuggestion>
  <CompleteSuggestion>
    <suggestion data="stackable washer dryer"/>
    <num_queries int="1050000"/>
  </CompleteSuggestion>
  <CompleteSuggestion>
    <suggestion data="stacked"/>
    <num_queries int="57000000"/>
  </CompleteSuggestion>
  …
</toplevel>

I want to put an input field on my website and get the suggestions while typing. How would I get the XML and show it like regular HTML(text) on my website?

(Can I do this with jQuery??)

Answer 1

To retrieve the XML data cross-domain you can use YQL to retrieve the data and transform them into JSONP.

For showing the suggestion you can use jQuery UI’s Autocomplete.

$("#term").autocomplete({
  minLength: 2,
  source: function(request, response) {
    $.ajax({
      url: 'http://query.yahooapis.com/v1/public/yql',
      dataType: 'JSONP',
      data: {
        format: 'json',
        q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + encodeURIComponent(request.term) + '"'
      },
      success: function(data) {
        response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
          return { label: item.suggestion.data, value: item.suggestion.data };
        }));
      }
    });
  }
});

HERE is the code.