在 jQuery 和 Bootstrap 2.1 中使用 TypeAhead答案

【问题标题】：Using TypeAhead with jQuery and Bootstrap 2.1在 jQuery 和 Bootstrap 2.1 中使用 TypeAhead
【发布时间】：2013-08-12 13:24:51
【问题描述】：

在版本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）时，不会显示任何 Typeahead 结果，但从 users 变量记录的数据如下所示：

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

为什么这不起作用？

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

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

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

.typeahead {
    z-index: 1100;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我通过包含“.modal”将其扩展到整个对话框，因此：.modal, .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;
                            }
                        }
});

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

【讨论】：