JSFiddle - React, Tailwind, and code Playground

by Peter Johnson

HTML

<ul id="results" />

CSS

#results {
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 12px;
  list-style: none;
  padding: 0;
}
#results li {
  display:block;
  color:#000000;
  line-height:30px;
  border-bottom: solid 1px #CCCCCC;
  padding:0 10px;
  cursor: pointer;
}
#results li:hover {
  color:#FFFFFF;
  font-weight: bold;
  background-color: lightblue;
}

JavaScript

$.ajax({
  url: "https://search.mapzen.com/v1/search",
  method: "GET",
  dataType: "json",
  data: {
    "text": "London, UK",
    "api_key":'search-Bc6zSak'
  },
  success: function( data, status, jqxhr ){
    console.log( "Request received:", data );
    displayResults( data );
  },
  error: function( jqxhr, status, error ){
    console.log( "Something went wrong!" );
  }
});

function displayResults( data ){
  $("#results").empty();
  data.features.forEach(function(feat){
    var label = feat.properties.label;
    $("#results").append('<li>'+label+'</li>');
  });
};