Typeahead Bloodhound Remote

Example of remote typeahead

by Mike D

HTML

<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/examples.css">
<input id='myTextBox' class='typeahead' placeholder='numbers (1-10)' type='text' />

JavaScript

var numbers = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
          url: 'https://www.googleapis.com/books/v1/volumes?q=quilting'
  },
  transform: function(response) {
   console.log('transform', response);
    return response.items;
  }
});
 
// initialize the bloodhound suggestion engine
numbers.initialize();
 
// instantiate the typeahead UI
$('#myTextBox').typeahead(null, {
  displayKey: function(suggestion) {
      console.log('suggestion', suggestion);
            return suggestion.volumeInfo.title + suggestion.volumeInfo.publishedDate;
        },
  source: numbers.ttAdapter()
});

$('#myTextBox').typeahead('val', 'Your First Quilt Book');