goog.ui.AutoComplete.Remote

Publié par Maxence le ven, 16/07/2010 - 12:41

Le code suivant transforme l'input nommé fruit-search en champ avec complétion automatique.

goog.require("goog.ui.AutoComplete.Remote");
 
var ac = new goog.ui.AutoComplete.Remote("/fruits/auto-complete", 
  document.getElementById("fruit-search"));

L'URL /fruits/auto-complete est appelée à chaque fois que l'utilisateur modifie le texte. Les paramètres suivants sont passés dans la requête GET :

Nom du paramètreDescription
tokenTexte contenu dans l'input
max_matchesNombre maximal de résultats à retourner
use_similarSi à 1, le serveur doit retourner les enregistrements similaires

Le serveur doit retourner un tableau au format JSON comme celui-ci :

["Citron","Fraise","Pomme"]

Evénements

Vous pouvez réagir à une sélection de l'utilisateur avec l'événement goog.ui.AutoComplete.EventType.UPDATE.

Exemple qui redirige l'utilisateur lorsqu'il sélectionne un élément de la liste :

goog.require("goog.ui.AutoComplete.Remote");
goog.require("goog.ui.AutoComplete.EventType");
 
var ac = new goog.ui.AutoComplete.Remote("/fruits/auto-complete",
  document.getElementById("fruit-search"));
goog.events.listen(ac, goog.ui.AutoComplete.EventType.UPDATE, function(e) {
  var uri = new goog.Uri("/fruits/view");
  uri.setParameterValue("name", e.row);
  document.location.href = uri.toString();
});

Ajouter un commentaire