Автоматично довършване на jQuery - проблем с IE8 - този раздел е възстановен

Срещам проблем с jQuery UI - Autocomplete и IE8.

Използвам метод combobox, който можете да намерите на уебсайта на jQuery UI - тук< /strong>
По принцип създава вход за автоматично довършване + избор на меню от select/option списък.

Използвам jQuery 1.6.4 и jQuery UI 1.8.16; и двете от сървъра на google.

Работи перфектно на Chrome / FF / Opera, но не работи на IE8.

В IE8 - след като изберете нещо (след като напишете) или използвате падащия бутон, IE ще презареди страницата. Моля, имайте предвид, че IE няма да се срине, докато не използвате стрелки или не опитате да изберете нещо.

  • res://ieframe.dll/acr_error.htm#, в URL адреса, пред действителния път
  • или съобщение this tab has been reloaded; a problem with the page causes IE to close and reopen the page

Пример на живо тук

Някаква идея какво кара IE да се държи така? Всяко предложение се оценява много.


jQuery код:

    <script>
    (function( $ ) {
        $.widget( "ui.combobox", {
            _create: function() {
                var self = this,
                    select = this.element.hide(),
                    selected = select.children( ":selected" ),
                    value = selected.val() ? selected.text() : "";
                var input = this.input = $( "<input>" )
                    .insertAfter( select )
                    .val( value )
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: function( request, response ) {
                            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                            response( select.children( "option" ).map(function() {
                                var text = $( this ).text();
                                if ( this.value && ( !request.term || matcher.test(text) ) )
                                    return {
                                        label: text.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                                $.ui.autocomplete.escapeRegex(request.term) +
                                                ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                            ), "<strong>$1</strong>" ),
                                        value: text,
                                        option: this
                                    };
                            }) );
                        },
                        select: function( event, ui ) {
                            ui.item.option.selected = true;
                            self._trigger( "selected", event, {
                                item: ui.item.option
                            });
                        },
                        change: function( event, ui ) {
                            if ( !ui.item ) {
                                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                    valid = false;
                                select.children( "option" ).each(function() {
                                    if ( $( this ).text().match( matcher ) ) {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                if ( !valid ) {
                                    // remove invalid value, as it didn't match anything
                                    $( this ).val( "" );
                                    select.val( "" );
                                    input.data( "autocomplete" ).term = "";
                                    return false;
                                }
                            }
                        }
                    })
                    .addClass( "ui-widget ui-widget-content ui-corner-left" );

                input.data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.label + "</a>" )
                        .appendTo( ul );
                };

                this.button = $( "<button type='button'>&nbsp;</button>" )
                    .attr( "tabIndex", -1 )
                    .attr( "title", "Show All Items" )
                    .insertAfter( input )
                    .button({
                        text: false
                    })
                    .removeClass( "ui-corner-all" )
                    .click(function() {
                        // close if already visible
                        if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                            input.autocomplete( "close" );
                            return;
                        }

                        // work around a bug (likely same cause as #5265)
                        $( this ).blur();

                        // pass empty string as value to search for, displaying all results
                        input.autocomplete( "search", "" );
                        input.focus();
                    });
            },

            destroy: function() {
                this.input.remove();
                this.button.remove();
                this.element.show();
                $.Widget.prototype.destroy.call( this );
            }
        });
    })( jQuery );

    $(document).ready( function() {

        $("#combobox").combobox();

    });


    </script>

person Iladarsda    schedule 19.10.2011    source източник


Отговори (3)


Все още се опитвам да разбера защо IE8 се срива, но работи за мен, когато добавите jQueryUI тема към страницата, например:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css">

Редактиране: Мисля, че знам на кой ред се срива, но все още не знам защо! В jQueryUI код activate: function( event, item ) {

е следният код, който добавя стил и атрибут към активния елемент.

this.active = item.eq(0)
    .children("a")
    .addClass("ui-state-hover")
    .attr("id", "ui-active-menuitem")
    .end();

По някаква причина IE8 се срива тук, въпреки че за мен понякога не се срива, когато премахна редовете .addClass и .attr.

Редактиране 2: Добре, по някаква причина IE се срива с вашия .ui-autocomplete стил. Ако промените overflow:scroll; на overflow:auto; тогава IE8 няма да се срине. Като алтернатива променете max-height само на height, което също го коригира. Предполагам, че това е грешка в IE или с max-height (може би IE8 overflow:auto with max-height) или overflow.

person andyb    schedule 29.10.2011

На пръв поглед тази линия ми изглежда странна:

   if ( this.value && ( !request.term || matcher.test(text) ) )
       return {

Но работи добре за мен в ie8, в ie7 изобщо не работи. Опитайте if(){return{...}}.

person MiBu    schedule 19.10.2011
comment
Когато направите тази промяна, както предложихте - скриптът е неуспешен (всички конкурентни стойности са недефинирани) - person Iladarsda; 19.10.2011

бързият преглед открива, че в етикета на вашия скрипт липсва задължителен атрибут за тип

<script type="text/javascript">

Възпроизведох проблема, копирах файла локално без CSS и без грешки.

Странно, АКО на оригиналната страница деактивирам CSS с помощта на инструментите за разработчици на IE, няма да се срине.

person Mark Schultheiss    schedule 19.10.2011
comment
Да, така е. Благодаря. Това за съжаление не решава проблема. - person Iladarsda; 19.10.2011
comment
Ако сте провели бърз тест за използване на jQuery версия 1.6.4, продължава ли да се проваля? (страницата има 1.4.3 в момента) - person Mark Schultheiss; 19.10.2011
comment
Да, така е. На първо място имаше 1.6.4. Много е странно, тъй като използвам оригинален код от примери на jQuery UI. - person Iladarsda; 19.10.2011
comment
Потвърдих 1.6.4 и грешката на моя браузър. ИСТИНСКИ странно, че АКО изтегля това локално на моята машина, то не се проваля - нямам източника на вашия CSS файл и изображенията, посочени там. Възможно ли е да вградите това и да премахнете препратките към изображения? (за да се опитам да репликирам от моята локална машина.) - person Mark Schultheiss; 19.10.2011
comment
копие на всички файлове тук: dl.dropbox.com/u/17683975/AutoCompleteIE. zip - person Iladarsda; 19.10.2011