Exemples et extensions

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Ces exemples sont interactifs. Cliquez sur un bouton pour ouvrir la modale et tester une requête.

Recherche basique par mot-clé

Utilisez l'expérience par défaut avec vos identifiants d'index. Idéal pour les documentations classiques, blogs et tout site disposant d'un index compatible DocSearch.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  insights={true}
  translations={{ button: { buttonText: 'keyword search (demo)' } }}
/>

---

Ask AI : réponses assistées par IA

Ajoutez algolia askai pour obtenir des réponses synthétisées basées sur votre contenu indexé. Vous pouvez délimiter le contexte LLM en utilisant des searchParameters tels que facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes et distinct.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  askAi={{
    assistantId: 'askAIDemo',
    searchParameters: {
      facetFilters: ['language:en'],
    },
  }}
  insights={true}
  translations={{ button: { buttonText: 'search with askai (demo)' } }}
/>

---

Rendu personnalisé des résultats (hitComponent)

Remplacez le balisage par défaut des résultats pour correspondre à votre identité visuelle. Voici un exemple minimal de composant personnalisé.

function CustomHit({ hit }) {
  // render a compact, branded hit card
  return (
    <a
      href={hit.url}
      style={{ display: 'block', padding: '12px 16px', textDecoration: 'none' }}
    >
      <div style={{ display: 'flex', gap: 12 }}>
        <div
          style={{
            width: 40,
            height: 40,
            backgroundColor: '#e3f2fd',
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontWeight: 600,
            color: '#1976d2',
          }}
        >
          {hit.type?.toUpperCase?.() || 'DOC'}
        </div>
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              fontWeight: 600,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {hit.hierarchy?.lvl1 || 'untitled'}
          </div>
          {hit.hierarchy?.lvl2 && (
            <div
              style={{
                color: '#666',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {hit.hierarchy.lvl2}
            </div>
          )}
          {hit.content && (
            <div style={{ color: '#888', marginTop: 4 }}>{hit.content}</div>
          )}
        </div>
      </div>
    </a>
  );
}

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={CustomHit}
  insights={true}
  translations={{ button: { buttonText: 'custom hits (demo)' } }}
/>;

---

Ouvrir les liens dans de nouveaux onglets

Par défaut, DocSearch ouvre les liens des résultats dans la fenêtre actuelle. Pour ouvrir les résultats dans de nouveaux onglets, vous devez utiliser à la fois un hitComponent personnalisé et la prop navigator afin de gérer de manière cohérente la navigation par clic et au clavier.

// Custom hit component with target="_blank"
function HitWithNewTab({ hit, children }) {
  return (
    <a href={hit.url} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

// Navigator configuration to handle keyboard navigation
const newTabNavigator = {
  navigate: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewTab: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewWindow: ({ itemUrl }) => window.open(itemUrl, '_blank'),
};

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={HitWithNewTab}
  navigator={newTabNavigator}
  insights={true}
  translations={{ button: { buttonText: 'open in new tabs (demo)' } }}
/>;

avertissement

Remarque : Utiliser uniquement hitComponent avec target="_blank" fonctionne pour les clics souris, mais la navigation clavier (flèches + Entrée) nécessite la prop navigator pour ouvrir systématiquement les liens dans de nouveaux onglets.

---

Adaptez la structure de vos données avec transformItems

DocSearch ne se limite pas aux enregistrements standard. Utilisez transformItems pour adapter n'importe quelle structure de données au format interne attendu. Cela permet de créer des recherches pour applications, centres d'aide, journaux de modifications ou tout contenu personnalisé.

L'extrait ci-dessous transforme un enregistrement non standard au format interne. Testez-le en direct :

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="crawler_doc"
  askAi={{ assistantId: 'askAIDemo' }}
  searchParameters={{
    attributesToRetrieve: ['*'],
    attributesToSnippet: ['*'],
    hitsPerPage: 20,
  }}
  transformItems={(items) =>
    items.map((item) => ({
      objectID: item.objectID,
      content: item.content ?? '',
      url: item.domain + item.path,
      hierarchy: {
        lvl0: (item.breadcrumb || []).join(' > ') ?? '',
        lvl1: item.h1 ?? '',
        lvl2: item.h2 ?? '',
        lvl3: null,
        lvl4: null,
        lvl5: null,
        lvl6: null,
      },
      url_without_anchor: item.domain + item.path,
      type: 'content',
      anchor: null,
      _highlightResult: item._highlightResult,
      _snippetResult: item._snippetResult,
    }))
  }
  insights={true}
  translations={{ button: { buttonText: 'transform items (demo)' } }}
/>

---

Conseils

• Instrumentation : activez insights pour envoyer des analyses d'utilisation et optimiser la pertinence.

• Délimitation Ask AI : utilisez facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes et distinct pour contrôler le contexte IA et améliorer la qualité des réponses.

• Personnalisation : exploitez hitComponent, transformItems et translations pour intégrer DocSearch naturellement à toute interface produit.