How to set class names for bootstrap typeahead.js autocomplete
I am using autocomplete typeahead.js. I saw a pattern for setting class names for typeahead at the link below.
https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
I tried the following options but I cannot change the default class name for 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>'
}
});
+3
source to share
1 answer
Here is a working jsfiddle where you can see the classNames work fine.
See also 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>
+2
source to share