[script.aculo.us] Pour aller plus loin avec ajax.Autocompleter

Pour aller plus loin avec ajax.Autocompleter

Bonjour

j'utilise ajax.Autocompleter fourni par script.aculo.us 1.8.3, tout fonctionne bien. Cependant ya un truc que j'aimerai faire c'est renvoyer un message d'une façon ou d'une autre à l'utilisateur pour lui dire que ya pas de suggestion et que ça sert à rien d'attendre.

J'ai bien vu indicator qui permet de faire patienter mais pour dire que la personne a pas de chance j'ai pas trouvé.

Si la solution est évidente, merci de me l'expliquer clairement, je ne suis pas très fort en javascript.

Bonjour,

La mauvaise nouvelle, c'est que cette option n'a pas été prévu dans Ajax.Autocompleter.
La bonne nouvelle, c'est que c'est facile à implémenter :
Il suffit de créer une classe héritant de Ajax.Autocompleter :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
// héritage
var MyAjaxAutoCompleter = Class.create(Ajax.Autocompleter, {
  // on surcharge le constructeur : on lui fait faire comme l'original avec 
  // $super, puis on gère une nouvelle option onNoItemsReturned  
  // qui est une fonction (par défaut ne fait rien)
  initialize:function($super, element, update, url, options) {
    $super(element, update, url, options);
    this.onNoItemsReturned = options.onNoItemsReturned || Prototype.emptyFunction;
  },
  // surcharge de onComplete
  onComplete: function($super, request) {
    // on fait ce que fait la classe mère
    $super(request);
    // on teste si on a 0 éléments renvoyés
    if(this.entryCount == 0) {
      // si c'est le cas, on execute notre fonction
      this.onNoItemsReturned();
    }
  }
});

Ensuite, on utilise notre classe plutôt que celle de scriptaculous en n'oubliant pas de définir notre nouvelle fonction en option :

Code:

1
2
3
4
5
6
7
8
9
10
 
var ac = new MyAjaxAutoCompleter(
  $("autoCompleteField"), 
  $("divResultats", 
  "/foo/bar", {
    onNoItemsReturned: function(){ 
      alert("pas de resultat");
    }
  }
);

Je me demande même si on ne peut pas "patcher" Ajax.Autocompleter en la redéfinissant elle même :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Ajax.Autocompleter = Class.create(Ajax.Autocompleter, {
  initialize:function($super, element, update, url, options) {
    $super(element, update, url, options);
    this.onNoItemsReturned = options.onNoItemsReturned || Prototype.emptyFunction;
  },
  onComplete: function($super, request) {
    $super(request);
    if(this.entryCount == 0) {
      this.onNoItemsReturned();
    }
  }
});

merci

je vais essayer votre solution.

ça marche bien.

Merci pour le coup de main.