More than one text field with typeahead handler not executing AJAX call?

Question

Before I ask my question I'll state some of the tools I'm using:

• jquery-1.11.0.js
• bootstrap v3.1.1
• modified bootstrap-typeahead.js

I have the typeahead to function wonderfully with only one textfield. However, when I add another text field and try to hook up the typehead handler to the second one, the second one fails to execute the AJAX call and I'm pulling my hair out trying to figure out what the problem is.

HTML Code:

<div id = "tester" class="well">
<input id = "test" class="typeahead" type="text" placeholder="Search" data-provide="typeahead" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
</div>

<div id = "tester2" class="well">
<input id = "test2" class="typeahead" type="text" placeholder="Search" data-provide="typeahead" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
</div>

Javascript:

<script src="assets/js/jquery-1.11.0.js"></script>
<script src="assets/js/bootstrap.js"></script>

<script>

$(function(){
$('.typeahead').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: 'my_controller',
            type: 'POST',
            data: 'query=' + query,
            dataType: 'JSON',
            async: true,
            success: function(data){
                typeahead.process(data);
            }

        });
    }
});
});

</script>

The AJAX call is failing to even execute with the second typeahead where as the first one works fine. I don't know what I'm missing. I'm even selecting the input by class name.

I would greatly appreciate any help or guidance.

Here is a jsfiddle: http://jsfiddle.net/pK6g5/

Thank you.

Answer 1

your "modified bootstrap-typeahead.js" library use $.browser which is not in jQuery since 1.9. To keep it you can add Jquery Migrate .

I just added the library to your fiddle and it seems to work: FIDDLE