Je voulais vous faire part de mes problèmes rencontrés avec le framework Scriptaculous. Pour ceux qui ont lu mon post datant d'il y a deux jours (il me semble), je vous disais que je ne pouvais pas scroller l'autocomplétion sous IE. Le div disparaissant dès que je voulais scroller avec la souris.
Après quelques durs labeurs, j'ai réussi à résoudre le problème tant bien que mal. Je vous donne donc l'astuce permettant de remédier à ce problème de scrolling.
Tout d'abord, pour utiliser l'autocomplétion, inclure les fichiers suivants :
prototype.js, scriptaculous.js et control.js (le fichier posant problème).
NB : mapage étant la page dynamique (ou non) générant la liste des numéros en l'occurrence
Ensuite control.js à modifier (Je ne vais pas tout vous montrer le code mais juste les fonctions à modifier).
Dans Autocompleter.Base.prototype
Autocompleter.Base.prototype = {
baseInitialize: function(element, update, options) {
this.element = $(element);
this.update = $(update);
this.hasFocus = false;
this.changed = false;
this.active = false;
this.index = 0;
this.entryCount = 0;
if(this.setOptions)
this.setOptions(options);
else
this.options = options || {};
this.options.paramName = this.options.paramName || this.element.name;
this.options.tokens = this.options.tokens || [];
this.options.frequency = this.options.frequency || 0.4;
this.options.minChars = this.options.minChars || 1;
this.options.onShow = this.options.onShow ||
function(element, update){
if(!update.style.position || update.style.position=='absolute') {
update.style.position = 'absolute';
Position.clone(element, update, {
setHeight: false,
offsetTop: element.offsetHeight
});
}
Effect.Appear(update,{duration:0.15});
};
this.options.onHide = this.options.onHide ||
function(element, update){
new Effect.Fade(update,{duration:0.15})
};
if(typeof(this.options.tokens) == 'string')
this.options.tokens = new Array(this.options.tokens);
this.observer = null;
this.element.setAttribute('autocomplete','off');
Element.hide(this.update);
/*
* Du fait d'un mauvais comportement de la scrollbar sous Internet Explorer,
* cette appel à la méthode onBlur a été désactivée.
*/
//Event.observe(this.element, "blur", this.onBlur.bindAsEventListener(this));
Event.observe(this.element, "keypress", this.onKeyPress.bindAsEventListener(this));
}
Et mettez en commentaire
onBlur: function(event) {
// needed to make click events working
setTimeout(this.hide.bind(this), 250);
this.hasFocus = false;
this.active = false;
}
C'est cette fonction onBlur qui faisait disparaître le div contenant la liste des items.
Ensuite dans la page html (ou autre) rajouter une auyre fonction javascript et un onclick dans le body comme ceci (C'est un peu barbare, mais c'est la seule solution que j'ai trouvé pour le moment.)
function cacherDiv(){
var divAutocomplete = document.getElementById('liste_auto_complete');
if(divAutocomplete){
divAutocomplete.style.display='none';
}
}
<body onclick="cacheDiv()">
Et voilà le travail. Finalement, c'était tout simple, mais vu que le seul problème dans Scriptaculous est le manque flagrant de commentaire, je me suis bien marré pendant quelques jours pour trouver la faille. Mais au final ça marche sous FF aussi bien que sous IE.
Vous allez me dire que sous FF, il n'y a pas besoin de tout ça puisque tout marche parfaitement sans modif, mais la plupart des internautes surfent encore dans les années 90 et ont du mal à vivre avec leur temps.
Autant aller jusqu'au bout pour vous dire qu'il y avait un autre bug assez gênant. Flagrant sous IE (ça devient systématique), un peu moins sous FF mais quand même.
C'est la navigation dans la liste déroulante en se servant des flêches du clavier. La flêche "haut" faisait remonter la scrollbar du navigateur et non celle du div. Décidemment, les développeurs ont eu du mal avec cet ascenseur.
Il y a juste à changer la ligne dans la fonction markPrevious
this.getEntry(this.index).scrollIntoView(true);
par
this.getEntry(this.index).scrollIntoView(false);
J'espère vous avoir aidé pour ceux qui me lisent et qui ont trouvé le même problème que moi.
bonjour à tous, 