Bibliothèque de composants UI Instantsearch Vanilla JS

Qu'est-ce qu'Algolia ?

Algolia permet aux développeurs modernes de créer des expériences de recherche et de découverte de classe mondiale sans aucun DevOps.
Les bibliothèques compatibles avec tous les principaux langages et frameworks facilitent l'enrichissement de l'expérience utilisateur.

Ajouter la recherche instantanée aux applications JavaScript

La bibliothèque d'interface utilisateur InstantSearch en JavaScript pur propose des widgets pré-construits, personnalisables et flexibles pour créer vos propres expériences de recherche ; découvrez les exemples de widgets . Elle intègre le rendu côté serveur et le routage, est open source, prête pour la production et maintenue par Algolia.

Caractéristiques

Fournit des composants d'interface utilisateur pré-construits, conformes aux meilleures pratiques pour Vanilla JS et indépendants des frameworks externes.
Intégrez-le à votre interface utilisateur ou application existante, ou utilisez les modèles InstantSearch.
Livré avec un thème CSS par défaut, entièrement personnalisable
Gère toute la logique métier des requêtes de recherche, des réponses et des états
Personnalisation progressive des composants (utiliser, étendre ou personnaliser)

Version

Compatible avec toutes les versions actuelles de la bibliothèque JavaScript sous-jacente
Le code est entièrement open source et disponible sur GitHub
Démarrez votre application avec create-instantsearch-app, NPM, ...

Intégrations associées

Fonctionne avec la saisie semi-automatique
Et avec tous nos clients et frameworks API

liens clés

Commencer gratuitement

HTML (CRÉEZ UN COMPTE GRATUIT ICI )

          
            <div class="ais-InstantSearch">

  <h1>InstantSearch.js e-commerce demo</h1>

  <div class="left-panel">

    <div id="clear-refinements"></div>

    <h2>Brands</h2>

    <div id="brand-list"></div>

  </div>

  <div class="right-panel">

    <div id="searchbox"></div>

    <div id="hits"></div>

    <div id="pagination"></div>

  </div>

</div>

CSS

          
            body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }

RECHERCHE

          
            search.addWidgets([

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: `

        <div>

          <img src="{{image}}" align="left" alt="{{name}}" />

          <div class="hit-name">

            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}

          </div>

          <div class="hit-description">

            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}

          </div>

          <div class="hit-price">\${{price}}</div>

        </div>

      `,

    },

  })

]);

JavaScript pur + Algolia