Script.aculo.us problème Autocompleter dans IE

Question

Je suis aux prises avec un problème avec le contrôle Script.aculo.us Autocompleter dans IE (je l'ai essayé dans IE6 & 7). Les suggestions qui n'apparaissent pas pour le premier caractère sont entrées dans la zone de texte après le chargement de la page. Après cet échec initial, le contrôle fonctionne comme il se doit.

J'ai vérifié que les données de suggestions sont renvoyées correctement par le serveur; le problème semble avoir quelque chose à voir avec le positionnement de l'élément suggestions, car d'autres éléments relativement positionnés sur la page se déplacent au moment où vous attendez que les suggestions apparaissent.

Est-ce que quelqu'un a entendu parler d'un tel problème ou a des suggestions pour le résoudre? Edit: En réponse à Chris, j'ai mis le paramètre partialChars à 1 et le contrôle fonctionne dans tous les autres navigateurs que j'ai essayés, qui sont les dernières versions de Firefox, Safari, Opera et Chrome. J'aurais probablement dû le préciser en premier lieu. Merci.

Answer 1

Votre problème se situe-t-il uniquement dans IE ou dans tous les navigateurs? Ignorer le premier caractère est en fait la valeur par défaut de l'autocompléteur. En controls.js, il y a une classe appelée Autocompleter.Local qui a un champ appelé partialChars qui par défaut 2. Les documents pour ce domaine disent:

// - partialChars - Combien de caractères à entrer avant de déclencher
// une correspondance partielle (contrairement à minChars, qui définit
// combien de caractères sont requis pour faire correspondre
// du tout). Par défaut à 2.

Answer 2

Je ne sais toujours pas exactement ce qui a causé ce problème, mais j'ai réussi à trouver un moyen de le contourner. L'idée est d'effectuer le traitement qui provoque normalement l'échec de la première entrée de caractères lorsque la page se charge pour l'obtenir de la façon suivante:

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

Je suis en effet eu le même problème exactement. Le problème se produit uniquement dans IE (également dans la version 8.0 bêta)

Firefox et Chrome j'ai essayé, n'ont pas de problèmes quoi-si-jamais.

Selon d'autres, cela est dû à la déclaration DOCTYPE dans le fichier HTML. Vérifiez ici: http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

Le bug a également obtenu un billet aux conseils de développement de rubis: http://dev.rubyonrails.org/ticket/11051

Les deux liens ont obtenu des solutions pour résoudre le problème.

Espérons que le bug sera corrigé dans la prochaine version du prototype/scriptaculous :)

Answer 4

Une grande merci pour le hack. Je l'ai utilisé moi-même, mais je l'ai modifié pour qu'il ne soit appelé que lorsque Ajax.Autocompleter est utilisé en procédant comme suit.

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...] 

Depuis le rappel est appelé juste avant que la demande réelle est faite, le positionnement de la DIV juste à ce moment est le plus logique. Et s'assurera que même si la fenêtre est redimensionnée ou défilée, le DIV est positionné correctement. Ce qui est exaspérant, c'est que pour le faire fonctionner de manière cohérente, j'ai dû l'emballer dans un "setTimeout()".Je n'ai pas expérimenté autant de réglages de timing, mais s'il y a un seuil de temporisation plus bas qui fonctionne, j'aimerais bien le savoir.

Testé sur IE 8 & 7 et fonctionne très bien. Et fonctionne avec d'autres navigateurs réels aussi bien. J'espère que cela évite à certains codeurs des maux de tête lorsqu'ils traitent de cela.

Answer 5

Il s'agit d'un bogue connu avec un correctif qui fonctionne mais qui n'a pas encore été inclus. Vous pouvez lire plus à ce sujet ici: https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

Answer 6

Après beaucoup de mal avec ce problème dans IE8/IE9 j'ai fini par utiliser un hack CSS. La méthode ici consiste à forcer la position relative à l'intérieur d'un conteneur positionné en absolu. Le conteneur supplémentaire est nécessaire pour faire flotter les choix sur les autres éléments.

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

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

Dans mon code HTML j'utilisé les classes comme suit:

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

L'idée est née ici: Scriptaculous/Prototype IE 8 Autocomplete disappearing problem.