Using TypeAhead with jQuery and Bootstrap 2.1

Question

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.

Answer 1

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;
}

Answer 2

The z-index works in version 2.3.1 of bootstrap, but the Typeahead menus get still get cut off if they extend beyond the borders of the dialog in either direction.

As a fix, add this CSS after loading bootstrap.css:

/* Fix for Bootstrap dialog typeahead cut-off */
.modal-body {
    overflow: visible;
}