pjsier/mapzen_typeahead.html

## mapzen_typeahead.html
<!DOCTYPE html>
<html>
  <head>
    <title>Mapzen Autocomplete Gist</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  </head>
  <body>
    <style>
    #map {
      width: 500px;
      height: 500px;
      float: right;
    }
    .tt-suggestion {
      background-color: white;
    }
    .tt-cursor {
      background-color: yellow;
    }
    </style>
    <input class="typeahead" type="text">
    <div id="map" style="width:500px;height:500px;"></div>
  </body>
  <script>
  var map = L.map('map').setView([41.907477, -87.685913], 10);

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var inputElement = document.getElementsByTagName("input")[0];

  var mapzen_key = "search-XXXXXXX";
  var auto_url = 'https://search.mapzen.com/v1/autocomplete';
  var search_url = 'https://search.mapzen.com/v1/search';

  var full_auto_url = auto_url + "?api_key=" + mapzen_key + "&focus.point.lon=-87.63&focus.point.lat=41.88&text=";

  var addr_matches = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("label"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: full_auto_url,
      rateLimitBy: "throttle",
      rateLimitWait: 1000,
      replace: function() {
        var val = inputElement.value;
        var processed_url = full_auto_url + encodeURIComponent(val);
        return processed_url;
      },
      transform: function(response) {
        response.features.map(function(addr) {
            addr.label = addr.properties.label;
            return addr;
          });
        return response.features;
      }
    }
  });

  addr_matches.initialize();

  $('.typeahead').typeahead({
    highlight: true,
    minLength: 3
  },
  {
    name: 'addresses',
    display: 'label',
    source: addr_matches
  });

  function searchMapzen() {
    $.ajax({
      url: search_url,
      data: {
        api_key: mapzen_key,
        "focus.point.lon": -87.63,
        "focus.point.lat": 41.88,
        text: inputElement.value
      },
      dataType: "json",
      success: function(data) {
        if (data && data.features) {
          map.setView([data.features[0].geometry.coordinates[1], data.features[0].geometry.coordinates[0]], 14);
        }
      },
      error: function(e) {
        console.log(e);
      }
    });
  }

  $('.typeahead').bind('typeahead:select', function(e, data) {
    map.setView([data.geometry.coordinates[1], data.geometry.coordinates[0]], 14);
  });

  inputElement.addEventListener('keyup', function (e) {
    if (e.keyCode == 13) {
      searchMapzen();
    }
  });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mapzen Autocomplete Gist</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	</head>
	<body>
	<style>
	#map {
	width: 500px;
	height: 500px;
	float: right;
	}
	.tt-suggestion {
	background-color: white;
	}
	.tt-cursor {
	background-color: yellow;
	}
	</style>
	<input class="typeahead" type="text">
	<div id="map" style="width:500px;height:500px;"></div>
	</body>
	<script>
	var map = L.map('map').setView([41.907477, -87.685913], 10);

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	var inputElement = document.getElementsByTagName("input")[0];

	var mapzen_key = "search-XXXXXXX";
	var auto_url = 'https://search.mapzen.com/v1/autocomplete';
	var search_url = 'https://search.mapzen.com/v1/search';

	var full_auto_url = auto_url + "?api_key=" + mapzen_key + "&focus.point.lon=-87.63&focus.point.lat=41.88&text=";

	var addr_matches = new Bloodhound({
	datumTokenizer: Bloodhound.tokenizers.obj.whitespace("label"),
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	remote: {
	url: full_auto_url,
	rateLimitBy: "throttle",
	rateLimitWait: 1000,
	replace: function() {
	var val = inputElement.value;
	var processed_url = full_auto_url + encodeURIComponent(val);
	return processed_url;
	},
	transform: function(response) {
	response.features.map(function(addr) {
	addr.label = addr.properties.label;
	return addr;
	});
	return response.features;
	}
	}
	});

	addr_matches.initialize();

	$('.typeahead').typeahead({
	highlight: true,
	minLength: 3
	},
	{
	name: 'addresses',
	display: 'label',
	source: addr_matches
	});

	function searchMapzen() {
	$.ajax({
	url: search_url,
	data: {
	api_key: mapzen_key,
	"focus.point.lon": -87.63,
	"focus.point.lat": 41.88,
	text: inputElement.value
	},
	dataType: "json",
	success: function(data) {
	if (data && data.features) {
	map.setView([data.features[0].geometry.coordinates[1], data.features[0].geometry.coordinates[0]], 14);
	}
	},
	error: function(e) {
	console.log(e);
	}
	});
	}

	$('.typeahead').bind('typeahead:select', function(e, data) {
	map.setView([data.geometry.coordinates[1], data.geometry.coordinates[0]], 14);
	});

	inputElement.addEventListener('keyup', function (e) {
	if (e.keyCode == 13) {
	searchMapzen();
	}
	});
	</script>
	</html>