Skip to main content

Autocomplete


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 les entrées du CMS (GraphQL possible aussi).
  • 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.)

Installation

Importez la fonction dans votre projet

import { Autocomplete } from "@overdog/fn"

Créez et initialisez une instance

new Autocomplete("#autocomplete-searchform", {
   textLength: 2,
   // Craft CMS element api endpoint and the related langCode (must match the lang code in your html)
   endpoints: [
      { langCode: "fr-CA", slug: "/autocomplete.json" },
      { langCode: "en-CA", slug: "/en/autocomplete.json" }
   ],
   fieldsToSearch: ["title", "url", "titleToAscii"],
   fieldToHighlight: "title",
   highlightClasses: "font-bold text-[#084b83]"
}).init()

Créez un endpoint avec Element API ou GraphQL

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,
                ];
              },
          ];
      },
  ]
];

Twig template Code


<form id="autocomplete-searchform" class="flex max-w-[600px]" role="search" action="{{ url('search-results'|t) }}" tabindex="0">
   {# 
      TEMPLATE FOR SUGGESTIONS PICKED UP BY JAVASCRIPT
      JavaScript will used this template for the suggestion. Template tags are ignored by browsers. 
      Use the $key$ placeholder to tell JavaScript wich value to inject from your data.
   #}
   <template data-fn-autocomplete-template>
      <a 
         href="$url$"
         class="block px-4 py-2 focus:bg-[#d7e4f4] hover:bg-gray-[#e0e2e7]">
         $title$
         {# you can add image, description, etc. any element from your data #}
      </a>
   </template>  

   {# LAYOUT #}
    <div data-fn-autocomplete-wrapper class="h-[44px] relative w-full">
      <input 
         data-fn-autocomplete-input
         class="h-full px-1 w-full border border-gray-200" 
         type="text" 
         name="s" 
         autocomplete="off" 
         placeholder="Search.." 
         required
      >
      <div 
         data-fn-autocomplete-results
         class="bg-white rounded-b-md shadow-[0_1px_2px_0_rgba(0,_0,_0,_0.11)] max-h-[300px] overflow-auto absolute top-[44px] left-0 w-full z-50" 
         tabindex="0"
      >
        <div data-fn-autocomplete-results-inner></div>
      </div>
    </div>
    <button 
      data-fn-autocomplete-submit
      class="
         rounded-full shrink-0 text-0.9em h-[44px] ml-4 w-[44px] bg-slate-700 text-white
         disabled:bg-[#c1c1c4] disabled:text-[#5a656a] disabled:opacity-50 disabled:pointer-events-none
      "
      type="submit" 
      disabled>
      Go
   </button>
</form>

Options