自动完成响应答案

【问题标题】：Autocomplete response自动完成响应
【发布时间】：2012-12-06 21:57:15
【问题描述】：

我正在尝试使用引导程序的弹出组件在文本框下“弹出”jquery 自动完成结果。

我在隐藏的 div (#wrapper) 中呈现自动完成查询的结果，我希望在呈现完成时设置我的弹出框的内容并显示它。

为此，我重载了 _renderItem 函数，该函数将我的结果 div 附加到隐藏容器 (#wrapper) 中。

我认为当 _renderItem 调用完成时会调用 response 函数，但我错过了一些东西，因为从未调用过响应函数。

有什么办法吗？

谢谢！

$("#bookSearch")
             .autocomplete({
                 minLength: 0,
                 source: '/Autocomplete/Books',
                 focus: function (event, ui) {
                     $("#bookSearch").val(ui.item.label);
                     return false;
                 },
                 search: function(event, ui) {
                     $('#wrapper').empty();
                 },
                 response: function (event, ui) {
                    $('#bookSearch').popover('destroy');
                    $('#bookSearch').popover({
                            html: true,
                            placement: 'bottom',
                            content: $('#wrapper').html()
                    });
                    $('#bookSearch').popover('show');
                 }

             })
             .data("autocomplete")._renderItem = function (ul, item) {
                 $('<div class="media"></div>')                             
                                    .data("item.autocomplete", item)
                                    .append("<a class=\"pull-left\" href=\"#\"><img class=\"media-object\" src=\""
                                    + item.ImgUrl
                                    + "\"></a><div class=\"media-body\"><h6 class=\"media-heading\">"
                                    + item.Name
                                    + "</h6>"
                                    + item.Author + "</div>").appendTo('#wrapper');


             };

【问题讨论】：

当 Bootstrap 有自己的 .typeahead 时，您是否有充分的理由使用 jquery UI 的 .autocomplete？ twitter.github.com/bootstrap/javascript.html#typeahead
response 在 1.9 中添加。你用的是1.9吗？此外，响应主要用于在建议之前操纵数据（如果我没记错的话，就在之前 _renderItem）
好的，首先我使用的是 jquery ui 1.8.20，我认为正如 Judah 所说，我可以自定义引导字体来做我想做的事情。

标签： jquery-ui twitter-bootstrap

【解决方案1】：

我通过在我的 css 文件中添加一个用于自动完成的 z-index 样式解决了这个问题。

.ui-autocomplete {
  z-index: 10000;
}

如有必要，请记住为z-index 设置更高的值。只是为了记录，我在 HTML 文件中有这样的东西

<div class="ui-widget">
   <label for="employee">Employee:</label>
   <input id="employee" type="text" name="employee" />
</div>

【讨论】：