Bootstrap TypeAhead with JSON data

Bootstrap TypeAhead with JSON data

by Alvin Olavarrieta

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.js"></script>
<input id='contact' class='lookup'/>

JavaScript

var jsonData = [
  {
    "id": 1,
    "value": "Andrew Pougher",
    "label": "Contact- Andrew Pougher, 11-2-13"
  },
  {
    "id": 2,
    "value": "Michele Moore",
    "label": "Contact- Michele Moore, 10-12-15"
  },
  {
    "id": 3,
    "value": "Michele Boob",
    "label": "Contact- Michele Boob, 09-5-08"
  },
  {
    "id": 4,
    "value": "Michael Moore",
    "label": "Contact- Michael Moore, 01-25-13"
  },
  {
    "id": 5,
    "value": "George Michael",
    "label": "Contact- George Michael, 10-4-84"
  }
]

$('.lookup').typeahead({
  displayText: function(item) {
       return item.label
  },
  afterSelect: function(item) {
      this.$element[0].value = item.value
  },
  source: function (query, process) {
    return $.getJSON('https://api.myjson.com/bins/14or0', { query: query }, function(data) {
      process(data)
    })
  }   
});