Question

在版本2.1 of Twitter Bootstrap中，能够在Typeahead选项was added中传递回调函数。但是，我一直很难用jQuery ajax调用它。

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

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（在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);
        }
      }
    });
  }
});

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

["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"]

为什么这不起作用？

另外，作为参考，这里是Typeahead JavaScript for Bootstrap。

Answer 1

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

事实证明结果已被返回并显示，但是先前结果容器不可见。

要修复它，我添加了这个CSS：

.typeahead {
    z-index: 1100;
}

Answer 2

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

作为修复，在加载 bootstrap.css：

后添加此CSS
/* Fix for Bootstrap dialog typeahead cut-off */ .modal-body { overflow: visible; }

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

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

使用TypeAhead与jQuery和Bootstrap 2.1

3 个答案: