9

在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。

4

3 回答 3

10

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

结果是结果被返回并显示，但 typeahead 结果容器只是不可见。

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

.typeahead {
    z-index: 1100;
}
于 2012-08-24T20:21:18.573 回答
4

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

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

/* Fix for Bootstrap dialog typeahead cut-off */
.modal-body {
    overflow: visible;
}
于 2013-04-19T21:16:05.433 回答
0 
    $('#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 必须存在才能使用上述代码。

于 2013-08-12T05:24:51.620 回答