Skip to content

L’autocomplétion en HTML5 : ce n’est pas encore ça

08/07/2011

Les louanges de HTML5 sont de plus en plus nombreux. Ce billet (+diaporama) en énumère quelques aspects.

En temps qu’utilisateur, je retiens surtout le mode de sauvegarde locale des données, pour éviter les ressaisies de formulaires plantés (ou la possibilité d’écrire des mails ou des billets sans être connecté — même si des logiciels ou extensions le permettent évidemment déjà).

En temps que bibliothécaire, je me creuse un peu la tête pour voir dans quelle mesure ces évolutions vont nous être utiles. J’ignore tout des perspectives de programmation, donc je me suis contenté des solutions techniquement simples, et je me suis évidemment arrêté à l’autocomplétion.

Autocomplétion HTML5  : le code

L’autocomplétion, il en a déjà été question ici. Le comportement se généralise, mais peu de catalogues en ligne en sont pourvus. Il paraît qu’il suffit d’un peu de code JavaScript et de l’accès aux index de recherche (par API) pour le mettre en place n’importe où, et que c’est relativement simple. Ca dépend qui parle — et personnellement, je ne sais pas faire.

L’autocomplétion version HTML5 semble beaucoup plus simple :

Vous avez un formulaire de recherche (encadré par des balises <form> et </form>

Dedans, vous avez une zone de saisie de texte libre : c’est une balise <input type="text">.

Pour que l’internaute se voie proposer une série de valeurs quand il comme sa saisie, il suffit d’ajouter cette liste de valeur en code caché dans la page, et d’y faire référence, sous cette forme :

<input name="q" type="text" list="liste_valeurs">
<datalist id="liste_valeurs">
<option label="suggestion 1" value="suggestion 1"/>
<option label="suggestion 2" value="suggestion 2"/>
<option label="suggestion 3" value="suggestion 3"/>
...
</datalist>

La balise <input> « appelle » les valeurs de la liste par l’attribut « list » qui indique l’identifiant de la <datalist>.

Dans cette <datalist>, on a des options, avec une différence entre le label : le libellé affiché comme suggestion lors de la frappe ; et la value : la valeur réellement retenue, qui sera envoyée au moteur de recherche.

Si on sait manipuler déjà un peu les formulaires HTML, il n’y a aucune difficulté à obtenir un tel résultat.

Perspectives : étroites

Sauf que pour un catalogue de bibliothèque, la pertinence reste faible : il est hors de question d’intégrer dans la page stockant le formulaire l’intégralité de la liste de nos auteurs, par exemple. C’est donc une fonctionnalité utilisable seulement dans un contexte où la liste des valeurs est faible.

Oh joie ! Au SCD de Nice, nous proposons une recherche spécifique pour les ouvrages qui permettent de préparer au concours de l’internat de médecine (les ECN). Actuellement, ce formulaire est une liste déroulante de 357 valeurs (la recherche libre est également proposée).

J’ai donc testé l’autocomplétion, en intégrant toutes ces valeurs non comme liste déroulante, mais comme proposition d’autocomplétion. Cela permet :

  • l’économie de deux champs de formulaire (texte libre + liste), remplacés par un seul
  • la possibilité de chercher par mots dans cette liste, avant de lancer la recherche dans le catalogue

Et cela donne :
[c’est muet : vous pouvez donc le regarder depuis votre PC professionnel sans déranger les collègues ni les lecteurs]

Donc c’est assez intéressant.

Hic

Sauf que ça ne fonctionne correctement que sous Firefox.

Chrome ignore complètement la liste, ainsi qu’Internet Explorer. Et Opera n’accepte de compléter que si ça correspond au début de phrase d’une valeur (je ne peux pas chercher sur le mot « trouble » comme dans la vidéo ci-dessus).

Si vous avez une documentation complémentaire qui permettrait un fonctionnement correct pour tous les navigateurs, je suis preneur…

Par ailleurs, les autres potentialités des formulaires HTML5 sont de toute façon à connaître (peut-être fonctionnent-elles déjà correctement). Ainsi un exemple de recherche dans le champ à remplir (attribut placeholder), le clavier qui se place directement dans la zone de saisie à l’ouverture de la page (attribut autofocus) les curseurs gradués (sliders) qui pourraient avantageusement envahir les questionnaires LibQual…

Les commentaires sont fermés.

%d blogueurs aiment cette page :