Réaliser un champ de formulaire avec autocomplétion avec jQuery UI - commentaires

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Et même une version amélioré qui permet de prendre en compte les lettres accentués.
Le filtre textebrut suffit, le json encode n'est pas nécessaire tant que tout est en utf8 mais il faut veiller à bien renvoyer les valeurs entre guillemets.

#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
#SET{collect,#ARRAY}

#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_EVENEMENT,titre,#LIEU|textebrut}}}


#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_RUBRIQUE,titre,#TITRE|textebrut}}}


#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_ARTICLE,titre,#TITRE|textebrut}}}

[{"id":#VALEUR{id},"label":"#VALEUR{titre}","value":"#VALEUR{titre}"}]
#FILTRE{trim}

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

J'ai pu trouver une solution grâce à l'aide du forum.
Pour ceux à qui cela pourrait être utile voici donc ma version du fichier autocomplete.html qui propose pour l'autocomplétion les titres d'articles, de rubriques et lieux d'événements.

#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
#SET{collect,#ARRAY}

#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_EVENEMENT,titre,#LIEU|textebrut|json_encode}}}


#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_RUBRIQUE,titre,#TITRE|textebrut|json_encode}}}


#SET{collect,#GET{collect}|push{#ARRAY{id,#ID_ARTICLE,titre,#TITRE|textebrut|json_encode}}}

[{"id":#VALEUR{id},"label":#VALEUR{titre},"value":#VALEUR{titre}}]
#FILTRE{trim}

Voir http://forum.spip.net/fr_266383.html#forum266420

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Merci pour cette contrib.
Je souhaite pour ma part que l'autocomplétion propose les titres des articles, des rubriques ou les lieux des évènements de l'agenda.

Pour ce faire, j'ai donc modifier l'autocomplete de cette manière en plaçant les séparateurs « , » virgule dans les parties conditionnelles des boucles.

]#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
[{"id":#ID_ARTICLE,"label":[(#TITRE|textebrut|json_encode)],"value":[(#TITRE|textebrut|json_encode)]},{"id":#ID_RUBRIQUE,"label":[(#TITRE|textebrut|json_encode)],"value":[(#TITRE|textebrut|json_encode)]},{"id":#ID_EVENEMENT,"label":[(#LIEU|textebrut|json_encode)],"value":[(#LIEU|textebrut|json_encode)]}

Mais cela ne fonctionne pas et je comprends que ce qu'il me faudrait c'est que cela soit conditionné par le fait qu'il il y ai eu un résultat pour la boucle précédente. Il faudrait donc une sorte de condition 'si précédé de' pour ajouter alors seulement la virgule.

Une idée pour gérer ça correctement ? Ça me parait simple mais je cherche sans trouver.

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Bonjour
Mon autocompletion est sensible à la casse. Effectivement en sql le critère LIKE rend la requête sur le champ titre par exemple sensible à la casse
en sql, on peut contourner en faisant UPPER(titre) like UPPER(term)
Mais comment faire de même avec les boucles spip ?

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Bonjour,

Je remercie Tchariss pour sa remarque - merci également et bien sûr à erational - car l'ajout de la pipeline dans mes_options.php est effectivement la meilleure solution.

En effet, l'ajout des bibliothèques / scripts directement dans le head ne suffisait pas : le sélecteur - et donc la position du menu des propositions - n'étant pas récupérée.

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

J'ai aussi eu recours à cette syntaxe car l'encodage des apostrophes n'était pas correct, j'obtenais aujourd'hui au lieu du texte aujourd'hui.

Est-ce normal, ou y'a-t-il un paramètre à préciser ?

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Est-ce que cela est fonctionnel en Spip 2.1 ?

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Un article super pratique qui m'a bien dépanné, merci.
J'ai quand même des remarques sur 2 points :

1) Dans le script activant l'autocomplétion, il vaut mieux utiliser la balise #URL_PAGE{autocomplete}.
J'ai d'abord utilisé l'url spip.php?page=autocomplete comme indiqué dans l'exemple, mais ça ne marchait pas : il manquait le « ../ » au début. Ca dépend peut-être des cas de figure, en tout cas avec la balise #URL_PAGE on est sûr d'avoir la bonne adresse.

2) Pour charger les scripts jquery ui, il y a la pipeline jqueryui_plugins qui permet d'éviter de charger les scripts en doublons.
Dans mes_options.php :

$GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|jqueryui_autocomplete";
function jqueryui_autocomplete($scripts){ $scripts[] = 'jquery.ui.autocomplete'; return $scripts;
}

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

J'ai trouvé comment résoudre le soucis :

Dans autocomplete.html, avant d'encodre en json, j'applique un filtre textebrut :

[(#REM) noisette ajax pour fournir une liste de mots l'autocompletion jQuery UI autocomplete parametre - term : lettre cherchee ]#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
[{"id":#ID_MOT,"label":[(#TITRE|textebrut|json_encode)],"value":[(#TITRE|textebrut|json_encode)]}]

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Ah finalement j'ai un léger soucis, je me retrouve avec des devant les : qui sont dans les titres des mots-clés listés par l'autocomplete…

Une idée là-dessus ?

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

Très bon merci ! J'utilisais le même mais avec une solution de base avec la doc JQuery, mais toute la liste des mots-clés s'affichait dans le code source des pages… Grâce à cette méthode, plus de soucis de ce genre.