title: Typeahead.js - Unable to choose suggestion
body: <p>I must be an idiot. I am using the <a href="https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md" rel="nofollow">Typeahead.js</a> plugin. I am trying to use custom templates for suggestions. While my custom templates appear, I cannot use the arrow-keys to actually select an item. If I hover over an item, the selection doesn't get highlighted either. I thought it might be just a styling issue. However, if 3 suggestions appear, and I click the down arrow twice, then enter, my selected option does not appear in the text box. Alternatively, if I choose an option with my mouse, the option does not appear in the box. </p>
  
  <p>What am I doing wrong? Currently, I have the following:</p>
  
  <pre><code>var suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/api/suggests?querytext=%QUERY',
      filter: function(results) {
        return $.map(results.Results, function(suggestion) {
          return suggestion;
        });
      }
  });
  suggestions.initialize();
  
  $(document).ready(function() {
    $('input.typeahead').typeahead(
      { minLength: 3 },
      {
        name: 'suggestions',
        source: suggestions.ttAdapter(),
        templates: {
          suggestion: function(data) {
            var str = '';
            if (data.Type === 'Customer') {
              str += '&lt;i class="icon-1"&gt;&lt;/i&gt;';
            } else if (data.Type === 'Product') {
              str += '&lt;i class="icon-2"&gt;&lt;/i&gt;';
            }
            str += '&lt;div&gt;' + data.Name + '&lt;/div&gt;';
            return str;
          }
        }
      }
    );
  });
  </code></pre>
  
  <p>The suggestions popup. The results come from the following JSON:</p>
  
  <pre><code>{
    "Results":[
      {
        "Type":"Customer",
        "Id":5,
        "Name":"Bill",
        "LastUpdated":"01-01-2015"
      },
      {
        "Type":"Customer",
        "Id":135,
        "Name":"Billows",
        "LastUpdated":"01-02-2015",
      },
      {
        "Type":"Product",
        "Id":241,
        "Name":"Bill Check",
        "LastUpdate":"01-04-2015"
      }
    ],
    "TotalResults":3,
    "TotalCustomers":2,
    "TotalProducts":1
  }
  </code></pre>
  
  <p>How do I a) Apply a highlight to an item when a use hovers over an item with the mouse or uses the arrow keys to get to it b) Put the select item's <code>Name</code> value in the input box when the suggestion is selected?</p>
  
  <p>Thanks!</p>