title: how to set class names for bootstrap typeahead.js autocomplete
body: <p>I am using typeahead.js autocomplete. I saw the pattern to set class names for typeahead at below link.</p>
  
  <p><a href="https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names" rel="noreferrer">https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names</a></p>
  
  <p>i tried the following options but i am unable to change the default class name of the typeahead autocomplete </p>
  
  <pre><code> $('#the-basics .typeahead').typeahead({
              hint: false,
              highlight: true,
              classNames: {
                  input: 'dummy',
                  hint: 'dummy',
                  menu: 'dummy',
                  dataset: 'dummy',
                  suggestion: 'dummy',
                  empty: 'dummy',
                  open: 'dummy',
                  cursor: 'dummy',
                  highlight: 'dummy',
  
              }
          },          
          {
              name: 'states',
              displayKey: 'value',
              source: substringMatcher(states),                
              templates: {
                  empty: [
                      '&lt;div class="empty-message"&gt;No States Found&lt;/div&gt;'
                  ],
                  header: '&lt;h3 class="league-name"&gt;States of USA&lt;/h3&gt;'
              }
          });
  </code></pre>