jQuery autocompletar - Problema IE8 - esta pestaña ha sido recuperada

Question

Tengo un problema con jQuery UI - Autocompletar e IE8.

estoy usando combobox método que se puede encontrar en la página web de jQuery UI - here
Básicamente, es la creación de autocompletar de entrada + menú de selección de select/option lista.

Estoy usando jQuery 1.6.4 y jQuery UI 1.8.16; ambos desde el servidor de google

Funciona perfectamente en Chrome/FF/Opera, pero no funciona en IE8.

En IE8 - una vez que seleccione algo (después de escribir), o use el botón desplegable IE volverá a cargar la página. Tenga en cuenta que IE no se bloqueará hasta que use flechas o intente seleccionar algo.

• res://ieframe.dll/acr_error.htm#, en la URL, frente a la trayectoria real
• o un mensaje this tab has been reloaded; a problem with the page causes IE to close and reopen the page

Live example here

Alguna idea de lo que está causando esto es, actuar de esa manera? Cualquier sugerencia muy apreciada. código

---

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> 

Answer 1

Todavía estoy tratando de averiguar qué IE8 está fallando pero lo hace trabajo para mí cuando se agrega un tema jQueryUI a la página, por ejemplo:

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

Editar: Creo que sé en qué línea se está estrellando, ¡pero aún no sé por qué! En el jQueryUI codeactivate: function(event, item) {

es el siguiente código que agrega estilo y un atributo al elemento activo.

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

Por alguna razón, IE8 se estrella aquí, aunque para mí veces no se bloquea cuando quito los .addClass y .attr líneas.

Editar 2: OK, por alguna razón, IE está fallando con su estilo .ui-autocomplete. Si cambia overflow:scroll; a overflow:auto; entonces IE8 no falla. Alternativamente, cambie max-height a solo height, que también lo corrige. Supongo que es un error en IE con max-height (quizás IE8 overflow:auto with max-height) o overflow.

Answer 2

Desde la primera vista, esta línea de mira extraño para mí:

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

Sin embargo, su trabajo muy bien para mí en IE8, en IE7 no su trabajo en absoluto. Prueba if() {return {...}}.

Answer 3

rápido vistazo encuentra su etiqueta de script no se encuentra atributo de tipo requerido

<script type="text/javascript"> 

reproduje el tema, copiar el archivo local sin CSS y no falla.

Impar, SI en la página original, deshabilito CSS utilizando las herramientas de desarrollador de IE, no se bloquea.