title: Why Typeahead shows json object in input after click
body: <p>My suggestion engine works fine, I just have a problem because when I click on item its json object appears in input element. I would like only OrgName to appear in input value.</p>
  
  <pre><code>&lt;input class="form-control companySearch" type="text" value="" name="q" autocomplete="off" placeholder="Search a company"&gt;
  
  var organization = new Bloodhound({
          remote: {
              url: '/search/org?term=%QUERY%',
              wildcard: '%QUERY%'
          },
          datumTokenizer: Bloodhound.tokenizers.whitespace('term'),
          queryTokenizer: Bloodhound.tokenizers.whitespace
      });
  $(".companySearch").typeahead({
          hint: true,
          highlight: true,
          minLength: 1,
      },
          {
              source: organization.ttAdapter(),       
              name: 'organizationsList',            
              templates: {                
                  suggestion: function (data) {        
                      return '&lt;a class="list-group-item "&gt;' + data.OrgName + ', '+ data.address.Address+ ', '+ data.address.city.City+ ', ' + data.address.city.country.Country  + '&lt;/a&gt;';                
  
                  }
              }
  
          }
      );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NLQbo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NLQbo.png" alt="Example how I get"></a></p>