Script.aculo.us Autocompleter Problem in IE

Question

Ich habe mit einem Problem mit der Script.aculo.us Autocompleter-Steuerelement in IE (Ich habe es versucht, in IE6 & 7). Die Vorschläge werden nicht angezeigt, da das erste Zeichen nach dem Laden der Seite in das Textfeld eingegeben wird. Nach diesem anfänglichen Fehler funktioniert das Steuerelement wie es sollte.

Ich habe überprüft, dass die Vorschlagsdaten korrekt vom Server zurückgegeben werden. Das Problem scheint etwas mit der Positionierung des Elements "Vorschläge" zu tun zu haben, da andere relativ positionierte Elemente auf der Seite in dem Moment verschoben werden, in dem Sie erwarten, dass die Vorschläge angezeigt werden.

Hat jemand von solch einem Problem gehört oder irgendwelche Vorschläge, wie man es beheben kann?

Edit: Als Antwort auf Chris, ich habe den partialChars Parameter auf 1 gesetzt und das Steuerelement funktioniert in allen anderen Browsern, die ich ausprobiert habe, die die neuesten Versionen von Firefox, Safari, Opera und Chrome sind. Ich hätte das wahrscheinlich zuerst klarstellen sollen. Vielen Dank.

Answer 1

Ist Ihr Problem nur in IE oder in allen Browsern? Das Ignorieren des ersten Zeichens ist der Standardwert für den Autocompleter. In controls.js gibt es eine Klasse Autocompleter.Local genannt, die ein Feld namens partialChars, die standardmäßig 2. Die Dokumentation für dieses Feld sagen hat:

// - partialChars - Wie viele Zeichen eingeben vor dem Auslösen
// eine teilweise Übereinstimmung (im Gegensatz zu minChars, die definiert
// wie viele Zeichen erforderlich sind, um eine Übereinstimmung
// überhaupt zu tun). Standardwerte auf 2.

Answer 2

Ich weiß immer noch nicht, was genau dieses Problem verursacht hat, aber ich habe es geschafft, mit einem Hack zu kommen, um es zu umgehen. Die Idee ist es, die Verarbeitung auszuführen, der den Fehler auf der ersten Zeicheneingabe normalerweise verursacht, wenn die Seite geladen wird es aus dem Weg zu bekommen:

new Ajax.Autocompleter(textInputId, suggestionsHolderId, suggestionsUrl, params); 

//Hack 
Event.observe(window, 'load', function() 
{ 
    try 
    { 
     Position.clone($(textInputId), $(suggestionsHolderId), 
      { setHeight: false, offsetTop: $(textInputId).offsetHeight}); 
    } 
    catch(e){} 
}); 

Answer 3

ich tatsächlich bin genau das gleiche Problem haben. Das Problem tritt nur in IE (auch in 8.0 Beta)

Sowohl Firefox und Chrome Ich habe versucht, haben keine Probleme, was auch immer.

Nach anderen ist dies aufgrund der DOCTYPE-Deklaration in der HTML-Datei. Schauen Sie sich hier: http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

Der Fehler hat auch ein Ticket an den rubin Entwickler-Boards: http://dev.rubyonrails.org/ticket/11051

Beiden Verbindungen haben Lösungen das Problem zu beheben.

Hoffentlich wird der Fehler wird in der nächsten Version von Prototyp/scriptaculous :) für den Hack

Answer 4

Vielen Dank fixiert werden. Ich habe das selbst verwendet, aber es so modifiziert, dass es nur aufgerufen wird, wenn der Ajax.Autocompleter verwendet wird.

function positionAuto(element, entry) { 
    setTimeout(function() { 
     Element.clonePosition('choices_div', 'text_element', { 
     'setWidth': false, 
     'setHeight': false, 
     'offsetTop': $('text_element').offsetHeight 
    }); 
    }, 300); 
    return entry; 
} 

new Ajax.Autocompleter('text_element', 'choices_div', [url to web service], { 
    paramName: 'fulltext', 
    minChars: 2, 
    callback: positionAuto, // See above 
    [etc...] 

Da der Rückruf, kurz bevor die eigentliche Anforderung aufgerufen wird, durchgeführt wird, macht die DIV Positionierung gerade am meisten Sinn in diesem Augenblick. Und stellt sicher, dass das DIV auch dann richtig positioniert ist, wenn das Fenster in der Größe verändert oder gescrollt wird. Was ist ärgerlich ist, dass, um es konsequent zu arbeiten, ich es in eine "setTimeout()" wickeln musste.Ich habe nicht so oft mit verschiedenen Timing-Einstellungen experimentiert, aber wenn es einen niedrigeren Timeout-Schwellenwert gibt, der funktioniert, würde ich es gerne wissen.

Getestet auf IE 8 & 7 und funktioniert sehr gut. Und funktioniert auch mit anderen echten Browsern. Hoffe, dies spart einigen Codern Kopfschmerzen, wenn sie damit zu tun haben.

Answer 5

Dies ist ein bekannter Fehler mit einem Patch, der zwar funktioniert, aber noch nicht enthalten ist. Sie können mehr darüber hier lesen: https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

Answer 6

Nach viel Mühe mit diesem Problem in IE8/IE9 endete ich mit einem CSS-Hack. Die Methode besteht darin, die relative Position innerhalb eines absolut positionierten Containers zu erzwingen. Der zusätzliche Container ist notwendig, um die Auswahl über andere Elemente zu verteilen.

div.acwrap { 
    position: absolute; 
    height: 40px; 
} 

div.autocomplete { 
    position: relative !important; 
    top: -5px !important; 
    left: 0px !important; 
    width:250px; 
    margin:0; 
    padding:0; 
} 

In meinem HTML-Code habe ich die Klassen wie folgt:

<div class="acwrap"> 
<div id="autocomplete_choices" class="autocomplete"> 
</div> 
</div> 

Die Idee entstand: Scriptaculous/Prototype IE 8 Autocomplete disappearing problem.