<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
   
  </head>

  <body>
    <h1>Location API Code Samples</h1>
 
<input type="text" id="searchtext" />
<p id="results" ></p>
 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
jQuery(document).ready(function ($) {

  $("#searchtext").keyup(function () {
    getAutoCompleteValues($("#searchtext").val());
  });
  
});

function getAutoCompleteValues(val) {

  if (val.length < 3) return false;
  $.ajax({
    type: "GET",
    dataType: "jsonp",
    jsonp: "callback",
    cache: false,
url: "http://apidev.accuweather.com/locations/v1/cities/autocomplete?apikey=ff1b463d98fb47af848ea2843ec5c925&q=" + val,
   success: function(data) {

$("#results").html('');

$.each(data, function (i, item) {
$("#results").append(item.LocalizedName + ", " + item.AdministrativeArea.ID + ", " + item.Country.ID);
});
          }
    });
}
/* Styles go here */