Autouzupełnianie jQuery - problem z IE8 - ta karta została odzyskana

Question

Występuje problem z interfejsem użytkownika jQuery - Autouzupełnianie i IE8.

Używam combobox sposobu, który można znaleźć na stronie internetowej jQuery UI - here
Zasadniczo, to jest tworzenie autouzupełniania wejście + Wybierz menu z select/option listy.

Używam jQuery 1.6.4 i jQuery UI 1.8.16; zarówno z serwera google.

Działa doskonale w Chrome/FF/Opera, ale nie działa na IE8.

Na IE8 - po wybraniu czegoś (po wpisaniu) lub użyciu przycisku menu IE przeładuje stronę. Nie należy leczyć IE, dopóki nie użyjesz strzałek lub nie spróbujesz czegoś wybrać.

• res://ieframe.dll/acr_error.htm#, w adresie URL, w przedniej części rzeczywistej ścieżki
• lub wiadomości this tab has been reloaded; a problem with the page causes IE to close and reopen the page

Live example here

Każdy pomysł co jest przyczyną IE do działania w taki sposób? Wszelkie sugestie bardzo doceniane. Kod

---

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

ja wciąż staram się wypracować dlaczego IE8 jest upaść, ale ma pracę dla mnie, kiedy dodać motyw jQueryUI do strony, na przykład:

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

Edit: Chyba wiem, która linia się zawiesza, ale wciąż nie wiem dlaczego! W kodzie jQueryUI code jest następujący kod, który dodaje styl i atrybut do aktywnego elementu.

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

Z jakiegoś powodu IE8 zawiesza się tutaj, chociaż dla mnie czasami nie upaść, kiedy usunąć .addClass i .attr linie.

Edycja 2: OK, z jakiegoś powodu IE ulega awarii ze stylem .ui-autocomplete. Jeśli zmienisz overflow:scroll; na overflow:auto;, wówczas IE8 nie ulegnie awarii. Alternatywnie zmień max-height na tylko height, co również naprawi. Zgadnij, że jest to błąd w IE z max-height (może IE8 overflow:auto with max-height) lub .

Answer 2

Z pierwszy rzut oka ta linia wygląda dziwnie do mnie:

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

Ale to działa dobrze dla mnie w IE8, IE7 jej nie działa w ogóle. Spróbuj, jeśli() {return {...}}.

Answer 3

szybkie spojrzenie znajdzie tag skrypt brakuje wymaganego atrybutu type

<script type="text/javascript"> 

I zamieszczonym problemu, skopiowany plik lokalny bez CSS i nie zawodzi.

Nieparzysty, IF na oryginalnej stronie, wyłączam CSS przy użyciu narzędzi programistycznych IE, to się nie psuje.