places-typeahead

demo.css

#preview {
  display: none;
  margin-top: 15px;
}

demo.html

<form>
  <div class="form-group">
    <input class="form-control typeahead" placeholder="Search Places..." type="text">
  </div>
</form>
<div class="img-thumbnail" id="preview">
</div>

demo.js

$('.typeahead')
  .typeahead({
    highlight: true,
    hint: false
  }, {
    display: 'name',
    source: new Bloodhound({
      datumTokenizer: function(datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
      },
      identify: function(obj) {
        return obj.cartodb_id;
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        filter: function(response) {
          return $.map(response.rows, function(row) {
            return {
              cartodb_id: row.cartodb_id,
              lat: row.lat,
              lng: row.lng,
              name: row.name,
              park: row.full_name,
              type: row.type,
              unit_code: row.unit_code
            };
          });
        },
        url: 'https://nps.cartodb.com/api/v2/sql?q=SELECT points_of_interest.cartodb_id,points_of_interest.name,parks.full_name,parks.unit_code,st_y(points_of_interest.the_geom) as lat,st_x(points_of_interest.the_geom) as lng, points_of_interest.type FROM points_of_interest,parks WHERE points_of_interest.unit_code=parks.unit_code AND points_of_interest.name IS NOT NULL AND points_of_interest.name ilike \'%25{{query}}%25\' ORDER BY points_of_interest.name,parks.full_name',
        wildcard: '{{query}}'
      }
    }),
    templates: {
      suggestion: Handlebars.compile('<div><strong>{{name}}</strong><br><em>{{#if type}}{{type}}</em> in {{/if}}<em>{{park}}</em></div>')
    }
  })
  .on('typeahead:select', function(e, val) {
    $preview
      .html(JSON.stringify(val, null, 2))
      .show();
  });