iframe: результаты автозаполнения пользовательского интерфейса jquery отображаются за iframe - PullRequest
Новая
       10

iframe: результаты автозаполнения пользовательского интерфейса jquery отображаются за iframe

0 голосов
/ 10 декабря 2018

Я загружаю страницу .aspx (ChildPage.aspx) вместе с другой страницей .aspx (ParentPage.aspx), используя iframe.Я вижу проблему при использовании элемента управления автозаполнением пользовательского интерфейса jquery внутри ChildPage.Проблема заключается в том, что результаты автозаполнения отображаются под дочерней страницей.

enter image description here

Здесь вы можете после элемента «ММММ», остальные элементы находятся за страницей.Мне нужно показать это над страницей.Поэтому я хотел бы увидеть другие доступные элементы.

Это ParentPage.aspx. 

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=.................... 
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <!-- JS and CSS files -->
    </head>
    <body>
        <form id="form1" runat="server">
          <!-- Other contents -->
           <div>
              <iframe src="ChildPage.aspx" style="width: 100%; height: 40vh; border: none" name="childPageIframe"></iframe>
           <div>
        </form>
    </body>
    </html>

А ChildPage.aspx - это * 

<%@ Page Language="C#" AutoEventWireup="true"................

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- JS and CSS files -->

    $("#MYTEXTBOX").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "../XXXXXX.asmx/ItemAutoComplete",
                type: "POST",
                dataType: "json",
                data: JSON.stringify({
                    keyword: request.term
                }),
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: (item.ItemName),
                            value: (item.item.ItemName),
                            id: item.ItemID
                        };
                    }));
                }
            });
        },
        position: { my: "right top", at: "right bottom" },
        minLength: 2,
        select: function (event, ui) {
           //
        }
    }).focus(function () {
        $(this).autocomplete("search");
    });


</head>

<body>
   <div class="inputRow">
        <label>Item</label>
        <input type="text" id="MYTEXTBOX"/>
   </div>
   <div class="inputRow">
        <label>Qty</label>
        <input type="text" id="Qty" readonly="readonly" clientidmode="Static" runat="server"  />
    </div>
</body>
</html>
...