SharePoint 2013应用程序部件 - 不使用iFrame或iFrame之外的流动元素

Question

我目前正在开发一个附加到Associate Directory应用程序的应用程序部件。

作为寻找某人的方法之一，我实现了jQuery UI自动完成小部件（http://jqueryui.com/autocomplete/）的自定义实现。

我的问题是，根据我们主页的设计，这个应用程序部分将放置在哪里，这不是很高。

所以我的问题是，当下拉列表关闭时，对于自动完成，其中一部分会被切断。 （见下图）

我知道我确实有一些样式选项可以让它变小并显示更多，但无论哪种方式，我想看看是否有更多选项供我使用。

我的第一个想法是我可以把它变成Web部件，但是我必须从应用程序中复制很多代码。

如果有任何想法，请告诉我！

谢谢你，Eric

Answer 1

将app part elements.xml中的高度设置为下拉列表的高度。当它聚焦时，您运行一个脚本，将应用程序部分窗口的大小调整为内容的高度。

我的应用程序部分执行异步调用，将数组呈现为应用程序部分中的行。在最后一行，我在代码下面运行。

        var senderId;

        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            if (param[0].toLowerCase() == "senderid")
                senderId = decodeURIComponent(param[1]);
        }
        var step = 77,
            newHeight = 0,
            arrayLength = scope.items.length,
            resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';
        for (var x = 0; x < arrayLength; x = x + 1) {
            newHeight = newHeight + step;
        }
        if (senderId) {
            resizeMessage = resizeMessage.replace("{Sender_ID}", senderId);
            resizeMessage = resizeMessage.replace("{Height}", newHeight);
            resizeMessage = resizeMessage.replace("{Width}", "100%");

            window.parent.postMessage(resizeMessage, "*");
        } 

其他几个例子： Example 1 Example 2