typeahead with remote

working example with remote data

by Trent Haynes

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div class="twitter-typeahead col-xs-12">
  <input type="text" spellcheck="true" style="width:300px" class="form-control typeahead tt-input" placeholder="Search for 'sun' 'repel' 'temp' ..." id="search-input" autocomplete="off" />
</div>
<input type='hidden' id='flag' value="todos"/>

JavaScript

var urlRoot = '//jsonplaceholder.typicode.com';
var todos = {
  url: urlRoot + '/todos',
  prepare: function(query, settings) {
    settings.url += '?q=' + query;
    return settings;
  },
  filter: function(data) {
  	return $.map(data, function(obj) {
    	console.log(obj)
    	return {
        Id: obj.id,
        Value: obj.title
      };
    });
  }
};

var taSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) {
    return obj.Value;
  },
  remote: todos
});

taSource.initialize(true);

$('#search-input').typeahead({
  hint: true,
  highlight: true,
  minLength: 3
}, {
  name: 'myMatches',
  source: taSource,
  display: 'Value'
});