Skip to main content

Autocomplete

Description

Information et liens à venir.

Autocomplete pour recherche Craft CMS.

  • Lors du focus dans le input, cela fetch vos entrées désirées au format json et les ajoute à la cache de session (sessionStorage).
  • Lorsque vous tapez dans le input, cela regarde dans le json et sors les résultats.
  • Tout se passe du côté client après le fetch initial, évitant de solliciter la base de donnée / serveur à chaque caractère.
  • Utilise le plugin first party de Craft CMS Element-api pour créer un endpoint vers nos entrées.
  • Vous pouvez rendre disponible n'importe quel champ et section.
  • Support multi-langue (la recherche cherche dans la langue courante)

Demo

Utilisez un des noms des composantes pour le autocomplete. Exemple : me (menu, etc.)

Documentation

Importez la fonction dans votre projet

Le path peut changer selon votre structure de projet.

import { Autocomplete } from "./functions/autocomplete.js"

Créez et initialisez une instance

Exemple avec deux langues sur votre site et un endpoint nommé search.json. Si votre site en anglais possède un url avec préfixe, par exemple en.yourwebsite.com, le slug serait aussi window.location.origin + "/search.json" puisque le location origin inclurait le préfixe.

const myAutocomplete = new Autocomplete("#autocomplete-searchform", {
  // your options
  textLength: 2,
  endpoints: [
    { langCode: "fr-CA", slug: window.location.origin + "/autocomplete.json" },
    { langCode: "en-CA", slug: window.location.origin + "/en/autocomplete.json" }
  ],
  fieldsToSearch: ["title", "titleToAscii", "url"] // be sure to make these fields available in your element api endpoint
})
// init your newly created instance
myAutocomplete.init()

Exemple de endpoint avec Element-API

Voici un exemple de configuration d'un endpoint simple avec Element-API de Craft CMS.

Par défaut avec ce endpoint, la fonction Autocomplete va chercher dans les champs title, titleToAscii (sans accent) et url de la section avec le handle "structurePages".

Documentation officielle

use craft\elements\Entry;
use craft\helpers\StringHelper;

return [
  'endpoints' => [

      'autocomplete.json' => function() {

          return [
              'elementType' => Entry::class,
              'criteria' => [
                'section' => 'structurePages',
              ],
              'paginate' => false,
              'pretty' => true,
              'transformer' => function(craft\elements\Entry $entry) {

                return [
                    'title' => $entry->title,
                    // clone the title column without any accent on export - toAscii
                    'titleToAscii' => craft\helpers\StringHelper::toAscii ($entry->title),
                    // url field
                    'url' => $entry->url,
                ];
              },
          ];
      },
  ]
];

Options

  • Name
    Type
    Default
    Description
  • textLength
    Integer
    2
    Longueur du texte avant que le autocomplete ne s'active
  • endpoints
    Objects Array
    null
    Voir exemple ci-dessus
  • fieldsToSearch
    Array
    ["title"]
    Les champs que vous voulez chercher. Doivent être rendus disponibles dans votre endpoint.

Code

Dossier de base

Dossier de base