Vorschläge

Produkte & Ressourcen

Was ist Algolia?

Algolia ermöglicht es modernen Entwicklern, erstklassige Such- und Entdeckungserlebnisse ohne DevOps zu erstellen.
Bibliotheken für alle gängigen Sprachen und Frameworks machen es einfach, das Nutzererlebnis zu bereichern. 
Erfahren Sie mehr über die Algolia-Produkte
Sofortsuche in JavaScript-Anwendungen hinzufügen

Die Vanilla JS InstantSearch UI-Bibliothek bietet vorgefertigte, anpassbare und flexible UI-Widgets, mit denen Sie Ihre eigenen Sucherlebnisse gestalten können –entdecken Sie die Widget-Galerie. Sie verfügt über Funktionen für serverseitiges Rendering und Routing, ist Open Source, produktionsreif und wird von Algolia gepflegt.
Erste Schritte mit InstantSearch JS

Funktionen

  • Bietet vorgefertigte UI-Komponenten, die den Best-Practice-Prinzipien für Vanilla JS entsprechen und unabhängig von externen Frameworks sind

  • Integrieren Sie die Funktion in Ihre bestehende Benutzeroberfläche oder App oder nutzen Sie die InstantSearch-Vorlagen

  • Enthält ein Standard-CSS-Design, das vollständig anpassbar ist

  • Verwaltet die gesamte Geschäftslogik für Suchanfragen, Antworten und Zustände

  • Schrittweise Anpassung von Komponenten (verwenden, erweitern oder anpassen)

Version

  • Kompatibel mit allen aktuellen Versionen der zugrunde liegenden JavaScript-Bibliothek

  • Der Code ist vollständig Open Source und auf GitHub verfügbar.

  • Starten Sie Ihre Anwendung mit „create-instantsearch-app“, NPM, …

Verwandte Integrationen

Los geht’s

HTML (HIER EIN KOSTENLOSES KONTO ERÖFFNEN)

 

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


        

      

    



    

      
        
SUCHE


      
      
    
    


    

      

        

        
          
            
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>

      `,

    },

  })

]);


        

      

    




    

        

            

   







    



            

                
                    Kostenlos loslegen
                
    













    



            

                
                    Entwicklerdokumentation entdecken
                
    







    







    





  
  

        
      

    

      Overlay 1
    

  

      Overlay 2
    

  
  

    

      

            





    

        

            
Nutzen Sie Algolia optimal

            

                
            

            

                    







    



            

                
                    Los geht’s