0

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

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

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

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

有什么解决办法吗？

谢谢！

$("#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');


             };
4

1 回答 1

0

我通过在我的 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>
于 2014-02-16T20:22:48.917 回答