Автозаполнение 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. - 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