Design Question

[darielopper]

I am currently working with a Bootstrap 3 template in which they add an effect to the input when they have the focus on it, in this case it is a blue line that is animated at the bottom edge of the control. When I call the function $ ('# control'). typeahead () this effect is omitted completely. I would like to keep it, I know internally that other classes are created and added to my input field, I tried to change the css several times but nothing. If you could help me with this topic I would greatly appreciate it.

Example:
HTML:

Javascript:
function loadData(){
// constructs the suggestion engine
var names = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '/json/names',
cache: false
}
});
$('#names').typeahead({
highlight: true,
minLength: 1
},
{
name: 'names',
source: names
});
}

        $('#load').on('click', function(){
            loadData();
        });