Question

我正试图弹出＆＃39;使用bootstrap的popover组件在文本框下使用jquery自动完成结果。

我在隐藏的div（#wrapper）中渲染自动完成查询的结果，我希望在渲染完成时设置我的弹出窗口的内容并显示它。

为此我已经重载_renderItem函数，该函数附加了我的结果＆＃39;隐藏容器内的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');


             };

Answer 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>

自动填充响应

1 个答案: