Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>Queries!</title>
</head>
<body>
  <div>
    <input type="text" id="query" class="text-query"/>
    <button id="submit">submit</button
  </div>
</body>
</html>
 
var countries = ["FR","GB","US","ES","ZA"];
​
​
$("document").ready(function() {
  $("#submit").click( function() {
    $(".country").remove();
    var query = $("#query").val();
​
    $.each(countries, function(idx, country) {
      $('<div/>', { class: "country" }).appendTo('body');
      $('<div/>', { 
        class: "header",
        text: country,
      }).appendTo($(".country").last());
      $('<ol/>', { id: country }).appendTo($(".country").last());
​
      var url = "http://suggestqueries.google.com/complete/search?client=chrome&q=" + encodeURI(query) + "&hl=" + country;
​
      $.ajax({
        url: url,
        type: 'GET',
        dataType: 'jsonp',
        success: function (data) {
          $.each(data[1], function(idx, text) {
            $('<li/>', { text: text }).appendTo("#" + country);
          });
        },
        error: function(jqXHR, textStatus, errorThrown){
          console.log(jqXHR);
          console.log(textStatus);
          console.log(errorThrown);
          return [];
        }
      });
    });
  });
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers