Démos du widget de recherche embarquable iso Algolia. Backend : Solr gpa-new via bridge AlgoliaCompat sur https://gpa-api.d1dev.fr.
Input texte unique avec menu déroulant qui suggère les pièces à partir de 2 caractères. Navigation clavier (↑↓↵ esc), debounce 150 ms, < 50 ms côté API.
widget.lite.jsPage de recherche complète : input principal, facettes (marque, modèle, catégorie), grille de résultats, pagination. Implémentée avec InstantSearch.js officiel d'Algolia pointé sur notre backend.
InstantSearch.js + algoliasearchLe cycle complet en 3 étapes : pousse des documents au format Algolia via POST /batch, Solr les indexe, puis cherche-les immédiatement. Avec bouton "nettoyer" pour ne pas polluer l'index prod.
Version lite (~13 KB / 5 KB gzip, vanilla TS, fetch direct sur l'API Algolia-compat) :
<script src="https://gpa-search-widget.d1dev.fr/widget.lite.js"
data-auto-init
data-config='{
"host": "https://gpa-api.d1dev.fr",
"indexName": "products",
"modes": ["autocomplete", "overlay"],
"selector": "input[data-gpa-search]",
"hotkey": "ctrl+k"
}'></script>
Version full (~156 KB, utilise les SDK Algolia officiels — algoliasearch + @algolia/autocomplete-js) :
<script src="https://gpa-search-widget.d1dev.fr/widget.full.js"
data-auto-init
data-config='{
"appId": "gpa",
"apiKey": "public",
"host": "https://gpa-api.d1dev.fr",
"indexName": "products"
}'></script>
GpaSearchWidget.mount({...config}) // init manuelle (sinon data-auto-init)
GpaSearchWidget.openSearch("requête") // ouvre l'overlay
GpaSearchWidget.attach(inputEl) // attache l'autocomplete à un input