How make jquery-ui autocomplete get out iframe?

问题

Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:

http://jsbin.com/ehidef/1

回答1:

As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:

main window:

<html>
    <head></head>
    <body>
        <iframe src="iframe.html"></iframe>
    </body>
</html>

iframe.html

<html>
    <head>
        <!-- include jQuery and jQuery UI and the like -->
        <script type="text/javascript">
            jQuery(function($){
                // This will take parent frame if in iframe, own body elsehow
                var el=top.document.body 

                // Instructs jQuery UI to show things on that previous element
                $('input').autocomplete({appendTo:el}); 
            });
        </script>
    </head>
    <body>
        <input type="text"/>
    </body>
</html>

The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.

As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.

IMPORTANT:

This will only work if both, parent and child are in the same domain [see: SOP]

UPDATE

After finishing doing this same thing, i came up with this solution for styling and position:

var files=[ // UI styles to be loaded on top frame
        "css/ui-lightness/jquery-ui-1.10.3.custom.css",
        "css/ui-lightness/custom.css"
]

// Create link tag and append to top frame head
for (var a in files) {
    var style=$("<link/>", {
        rel: "stylesheet",
        type: "text/css",
        href: files[a]
    });

    $(top.document).find('head').append(style);
}

// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
    return window.frameElement==this
});

$('input').each(function(){ // Cicle inputs to use with ui autocomplete
    // set position to left + input offset  2 is a fix for borders on input
    var pos= "left+"+($(this).offset().left+2)+
    // and to top + input position + height to have it on the bottom
             " top+"+($(this).offset().top+$(this).outerHeight()+1);

    // Autocomplete 
    $(this).autocomplete({
        appendTo:top.document.body, // put it on top window's body
        position:{
            at: pos,        // at calculated position
            of:parentIframe // from parent iframe
        }
    })

});

Once again, there may be voids, so fill up with relevant code at will

来源：https://stackoverflow.com/questions/13104073/how-make-jquery-ui-autocomplete-get-out-iframe

标签

jquery-ui

iframe

autocomplete

position