JSFiddle - React, Tailwind, and code Playground

by stratdaz

HTML

<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.js"></script>
<script src="http://twitter.github.com/hogan.js/builds/1.0.3/hogan.js"></script>
<input id="search_query" type="text" style="width: 250px">
    <input type="text" id="hdnDatum">

CSS

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 200px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

JavaScript

$('#search_query').typeahead({
     name: 'search',
     minLength: 3,
     limit: 10,
     //highlightSuggestion: true,
     local: [
         {value: 'Kenmore Hills 4069', suburb: 'Kenmore Hills', postcode: '4069', state: 'QLD'}, 
         {value: 'Chapel Hill 4069', suburb: 'Chapel Hill', postcode: '4069', state: 'QLD'}, 
         {value: 'Indooroopilly 4068', suburb: 'Indooroopilly', postcode: '4068', state: 'QLD'}, 
         {value: 'Woolloongabba 4122', suburb: 'Woolloongabba', postcode: '4122', state: 'QLD'}, 
         {value: 'Graceville 4071', suburb: 'Graceville', postcode: '4071', state: 'QLD'}, 
         {value: 'Lismore 2480', suburb: 'Lismore', postcode: '2480', state: 'NSW'},
         {value: 'Larapinta 3125', suburb: 'Larapinta', postcode: '3125', state: 'VIC'}],
     template: ['<p>{{suburb}} {{postcode}} {{state}}</p>'].join(''),
     engine: Hogan
 }).on("typeahead:selected typeahead:autocompleted", function(e,datum) { 
     $("#hdnDatum").val(datum.suburb + '|' + datum.postcode + '|' + datum.state);
     // set viewModel here instead
 });