将TypeAhead与jQuery和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.

在Twitter Bootstrap的2.1版本中，添加了在Typeahead选项中传递回调函数的功能。但是，我一直很难用jQuery ajax调用它。

Here's what I have so far.

这是我到目前为止所拥有的。

HTML

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)

JavaScript（在jQuery $（document）.ready函数中设置）

$("#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:

当我在Typeahead输入中键入test（或Test）时，不会显示Typeahead结果，但是从users变量记录的数据如下所示：

["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.

另外，作为参考，这里是用于Bootstrap的Typeahead JavaScript。

3 个解决方案

#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.

我想到了。 HTML表单（在问题中列出）显示在模式对话框中，Typeahead结果div出现在模式对话框后面。

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:

为了解决这个问题，我添加了这个CSS：

.typeahead {
    z-index: 1100;
}

#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.

z-index适用于bootstrap的2.3.1版本，但是如果Typeahead菜单在任一方向上超出对话框的边界，它们仍会被切断。

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

作为修复，在加载bootstrap.css后添加此CSS：

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

#3

    $('#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.

您可以使用上面的代码来获取打字头工作。确保以下列格式返回JSON数据data.mylist必须在那里才能使用上面的代码。

#1