Addressable: CoreJS Typeahead + Bootstrap Example

by addressable

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container mt-5">
  <h1 class="text-center mb-5"><a href="https://typeahead.js.org/" target="_blank">CoreJS Typeahead</a> + <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> Example</h1>
  <p>
    For demo purposes, set your <a href="https://www.addressable.dev/account">API key</a> here then, select country and search any address
    <input type="password" id="apikey" class="form-control" placeholder="Your API Key..." autocomplete="off">
  </p>
  <div class="input-group mb-3">
    <div class="col-8">
      <input type="text" id="typeahead-example" class="form-control typeahead" placeholder="Type to search...">
    </div>
    <div class="col-4">
      <select name="country_code" id="country_code" class="form-select" tabindex="2">
        <option value="AU" selected="">Australia</option>
        <option value="NZ">New Zealand</option>
      </select>
    </div>
  </div>

</div>
<div class="container mt-5">
  <code id='address_selection'></code>
</div>

CSS

.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}

.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}

.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  width: 100%;
}

.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  width: 100%;
}

.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height:...

JavaScript

// Note the following assets are included via jsfiddle CDN resources <---
// https://cdn.jsdelivr.net/npm/[email protected]/dist/typeahead.bundle.min.js
// https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

// action to take on selecting an address result
onAutocompleted = function(e, suggestion, dataset) {
  $("#address_selection").text(JSON.stringify(suggestion, null, '\t'));
};

// setup source for remote results 
address_auto = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://api.addressable.dev/v2/autocomplete?',
    prepare: function(query, settings) {
      settings.url = this.url + '&country_code=' + $('#country_code').find(":selected").val() + '&q=' + query + '&api_key=' + $('#apikey').val();
      return settings;
    }
  }
});

// apply corejs typeahead
$('#typeahead-example').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'address',
  source: address_auto,
  display: 'formatted'
}).on('typeahead:select', onAutocompleted);