使用jQuery和Bootstrap 2.1实现TypeAhead功能

Question

在 Twitter Bootstrap 的 2.1 版本中，Typeahead 选项中增加了传递回调函数的能力。然而，我试图使用 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）时，没有Typeahead结果显示，但从users变量记录的数据看起来像这样：

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

为什么这个不能工作？

此外，供参考，这是Bootstrap的Typeahead JavaScript代码。

- Matt K

Answer 1

我想通了。在问题中列出的HTML表单显示在模态对话框中，而Typeahead结果div出现在模态对话框后面。

结果显示出来了，但是Typeahead结果容器不可见。

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

.typeahead {
    z-index: 1100;
}

- Matt K

Answer 2

z-index属性在bootstrap 2.3.1版本中有效，但是Typeahead菜单如果向任意方向超出对话框边界，仍然会被截断。

解决方法是，在加载bootstrap.css后添加以下CSS代码：

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

- SpazDude

---

我通过将“.modal”包括在内，将其扩展到整个对话框中，因此： .modal，.modal-body { overflow: visible; } - epicsmile

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

你可以使用上面的代码来让typehead工作。请确保以以下格式返回JSON数据，data.mylist必须存在才能与上述代码配合使用。

- Mr.k