Как заставить автозаполнение jquery-ui выйти из iframe?

Можно ли заставить предложения автозаполнения (jQueryUI) выводить один iframe, имеющий такое же поведение?Выбрать" элемент? Я делаю один пример:

http://jsbin.com/ehidef/1

Ответы на вопрос(1)

хотя некоторые стили будут обязательными. jQueryUI принимает элемент для добавления параметров, и вы можете передать родительское окно в качестве этого элемента. Пример:

главное окно:


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

iframe.html


    
        <!-- 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>
    
    
        <input type="text">
    

В этом примере отсутствуют все вещи, не имеющие отношения к объяснению сути, поэтомуне работает. Добавьте при необходимости и добавьте немного сахара.

Что касается стиля, о котором я говорил ранее, вам нужно будет присвоить элементам позицию и стиль, так как 1) позиция относительно позиции ввода не имеет значения для родительского окна и 2) родитель не делаетне нужно загружать таблицы стилей jqueryui, хотя вы можете загружать их динамически изнутри iframe с помощью аналогичной техники.

ВАЖНЫЙ:

Это будет работать только в том случае, если оба, parent и child, находятся в одном домене [см .:СОП]

ОБНОВИТЬ

Закончив делать то же самое, я придумал это решение для стиля и позиции:

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
        }
    })

});

Еще раз, могут быть пустоты, поэтому заполните соответствующий код по желанию

Ваш ответ на вопрос