Biblioteca de componentes de interfaz de usuario Instantsearch para Vanilla JS

¿Qué es Algolia?

Algolia permite a los desarrolladores modernos crear experiencias de búsqueda y descubrimiento de primer nivel sin necesidad de DevOps.
Las bibliotecas disponibles para los principales lenguajes y marcos de trabajo facilitan el enriquecimiento de la experiencia de tus usuarios.

Añadir la búsqueda instantánea a las aplicaciones de JavaScript

La biblioteca Vanilla JS InstantSearch UI ofrece widgets de interfaz de usuario predefinidos, personalizables y flexibles para crear tus propias experiencias de búsqueda:echa un vistazo a la galería de widgets. Cuenta con capacidades de renderización del lado del servidor y de enrutamiento; además, es de código abierto, está lista para su uso en producción y su mantenimiento corre a cargo de Algolia.

Características

Ofrece componentes de interfaz de usuario ya creados que siguen los principios de las mejores prácticas de Vanilla JS y que son independientes de los marcos de trabajo externos.
Intégralo en tu interfaz de usuario o aplicación actual, o utiliza las plantillas de InstantSearch
Incluye un tema CSS predeterminado, totalmente personalizable
Gestiona toda la lógica de negocio relacionada con las solicitudes de búsqueda, las respuestas y los estados
Personalización progresiva de los componentes (utilizar, ampliar o personalizar)

Versión

Compatible con todas las versiones actuales de la biblioteca de JavaScript subyacente
El código es totalmente de código abierto y está disponible en GitHub.
Pon en marcha tu aplicación con create-instantsearch-app, npm, ...

Integraciones relacionadas

Funciona con la función deautocompletado
Y con todos nuestrosclientesymarcos de trabajo de API

enlaces importantes

Empezar

HTML (CREA UNA CUENTA GRATUITAAQUÍ)

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

BUSCAR

          
            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>

      `,

    },

  })

]);

Algolia Assist

¿En qué puedo ayudarte hoy?

Vanilla JS + Algolia