how to set class names for bootstrap typeahead.js autocomplete

Question

I am using typeahead.js autocomplete. I saw the pattern to set class names for typeahead at below link.

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names

i tried the following options but i am unable to change the default class name of the typeahead autocomplete

 $('#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: [
                    '<div class="empty-message">No States Found</div>'
                ],
                header: '<h3 class="league-name">States of USA</h3>'
            }
        });

Answer 1

Here is a working jsfiddle where you'll see the classNames are working perfectly.

See also the snippet below.

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  classNames: {
    input: 'dummy',
    hint: 'dummy',
    menu: 'dummy',
    dataset: 'dummy',
    suggestion: 'dummy',
    empty: 'dummy',
    open: 'dummy',
    cursor: 'dummy',
    highlight: 'dummy',
  },
  hint: true,
  highlight: true,
  minLength: 1,
}, {
  name: 'states',
  source: substringMatcher(states)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>