使用TypeAhead与jQuery和Bootstrap 2.1

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.

Answer 1

我想到了.HTML表单(在问题中列出)显示在模式对话框中,并且Typeahead结果div出现在模式对话框后面.

事实证明结果正在返回并显示,但是预先输出结果容器是不可见的.

为了解决这个问题,我添加了这个CSS:

.typeahead {
    z-index: 1100;
}