Using TypeAhead with jQuery and Bootstrap 2.1
javascript, jquery, twitter-bootstrap
Solution
I figured it out. The HTML Form (listed in the question) was displayed in a modal dialog, and the Typeahead results div was appearing behind the modal dialog.
It turns out the results were being returned and displayed, but the typeahead results container just wasn't visible.
To fix it, I added this CSS:
.typeahead {
z-index: 1100;
}
Problem
In version 2.1 of Twitter Bootstrap, the ability to pass a callback function in the Typeahead options was added. However, I've been having a difficult time getting this to work with a jQuery ajax call. Here's what I have so far. HTML ``` <form class="form-horizontal" action=""> <fieldset> <div class="control-group"> <label class="control-label" for="myTypeahead">User</label> <div class="controls"> <input type="text" id="myTypeahead" /> </div> </div> </fieldset> </form> ``` JavaScript (set in the jQuery `$(document).ready` function) ``` $("#myTypeahead").typeahead({ source: function (query, process) { $.ajax({ type: "POST", url: ServiceURL + "/FindUsers", data: "{ SearchText: '" + query + "' }", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r1) { var users = []; if (r1.d.Records) { $(r1.d.Records).each(function (index, val) { users.push(val.User.Name); }); console.log(users); process(users); } } }); } }); ``` When I type `test` (or `Test`) in the Typeahead input, no Typeahead results are displayed, but the data that is logged from the `users` variable looks like this: ``` ["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"] ``` Why wouldn't this work? Also, for reference, here's the Typeahead JavaScript for Bootstrap.