Composants

RechercheNouveau

Une seule barre de recherche pour tout AUBOTA. Elle interroge soit un endpoint (le serveur décide où chercher), soit une liste déjà présente dans la page. Clavier complet, accents ignorés.

Essayer

La recherche de la barre latérale de cette doc, c’est déjà AubuiSearch. Ici, une liste locale :

Chercher un fruit (ex. « peche », sans accent)

HTML

<input class="aub-input" type="search" data-aubui-search
       data-search-list-var="DOC_FRUITS"
       data-search-fields="label,sub"
       placeholder="Pomme, pêche, kiwi…">
<script>
  window.DOC_FRUITS = [{ label: 'Pêche', sub: 'Été', icon: '🍑' }, …];
</script>

Installer

Pas chargé par aubui.js : à poser sur les pages qui en ont besoin.

HTML

<link rel="stylesheet" href="https://ui.aubota.xyz/css/aubui/components/search.css">
<script src="https://ui.aubota.xyz/js/aubui-search.js" defer></script>

Deux sources

Endpoint

HTML

<input data-aubui-search
       data-search-url="https://social.aubota.xyz/api/search-users"
       data-search-params='{"scope":"users"}'
       data-search-min="2" placeholder="Chercher un pseudo…">

Appel GET <url>?q=<saisie>&scope=users&limit=12, en-tête Accept: application/json. Réponse : un tableau, ou { "results": [...] }. Une réponse arrivée après une saisie plus récente est ignorée.

JSON

[ { "label": "ana", "sub": "Ana Lopez", "href": "/u/ana", "icon": "👤", "id": 42 } ]

Sécurité côté serveur : l’endpoint décide de ce qui est cherchable. Ne renvoie jamais d’email, de hash ou de donnée qu’un inconnu ne doit pas voir, et exige la connexion si besoin.

Liste locale

data-search-list-var = nom d’une variable globale (window[nom]) contenant un tableau d’objets ; data-search-fields = champs concaténés pour la comparaison (minuscules, accents retirés, « contient »).

Référence

Attribut	Défaut	Rôle
`data-aubui-search`	—	Active le composant sur l’`<input>`.
`data-search-url`	—	Source endpoint (prioritaire sur la liste).
`data-search-params`	`{}`	JSON de paramètres ajoutés à la requête.
`data-search-list-var`	—	Source liste locale.
`data-search-fields`	`label,sub`	Champs comparés (liste locale).
`data-search-min`	`1`	Nombre de caractères avant de chercher.
`data-search-limit`	`12`	Nombre maximum de résultats.

Résultat	Rôle
`label`	Texte principal (échappé).
`sub` · `icon`	Ligne secondaire · emoji ou caractère avant le texte.
`href`	Si présent : la sélection navigue vers ce lien.
autres champs	Libres, transmis tels quels dans l’événement.

JS / événement	Rôle
`aubui:search:select`	Émis sur l’input (remonte) à la sélection, `detail` = le résultat. `preventDefault()` empêche la navigation vers `href`.
`AubuiSearch.init(input)`	Active un champ précis.
`AubuiSearch.scan(root?)`	Active tous les `input[data-aubui-search]` (fait aussi automatiquement pour le contenu injecté).

input.addEventListener('aubui:search:select', (e) => {
  e.preventDefault();               // pas de navigation
  ouvrirFiche(e.detail.id);
});