0

ブートストラップのポップオーバー コンポーネントを使用して、テキスト ボックスの下に jquery オートコンプリートの結果を「ポップアップ」しようとしています。

非表示の div (#wrapper) でオートコンプリート クエリの結果をレンダリングし、レンダリング完了時にポップオーバーのコンテンツを設定して表示したいと考えています。

このために_renderItem、隠しコンテナ (#wrapper) 内に結果の div を追加する関数をオーバーロードしました。

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 に答える