CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Matt K
Matt K

Reputation: 7327

Using TypeAhead with jQuery and Bootstrap 2.1

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.

Upvotes: 9

Views: 8228

Answers (3)

Mr.k
Mr.k

Reputation: 146

    $('#activity').typeahead({
                        itemSelected:function(data,value,text){
                            console.log(data)
                            alert('value is'+value);
                            alert('text is'+text);
                        },                                                    
                        ajax: {
                            url: "/path/to/destination",
                            timeout: 500,
                            displayField: "activity",
                            triggerLength: 2,
                            method: "get",
                            loadingClass: "loading-circle",
                            preDispatch: function (query) {
                                //showLoadingMask(true);
                                return {
                                    search: query
                                }
                            },
                            preProcess: function (data) {
                                //showLoadingMask(false);
                                if (data.success === false) {
                                    // Hide the list, there was some error
                                    return false;
                                }
                                // We good!            
                                return data.mylist;
                            }
                        }
});

You can use above code to get the typehead work. Make sure you are returning the JSON data in the following format data.mylist must be there to work with the above code.

Upvotes: 0

SpazDude
SpazDude

Reputation: 924

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

Upvotes: 4

Matt K
Matt K

Reputation: 7327

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

Upvotes: 10

Related Questions