swiftype autocomplete jquery

Ein Erstanbieter-Suchanlagen für elastische Site JQuery-Plugin für die Suche nach automatischer Vervollständigung.

Inhalt

• Erste Schritte
• Verwendung
• Anpassungs -Tutorial
• FAQ
• Beitragen
• Lizenz

---

Erste Schritte ?

Anforderungen:

1. Site -Suchkonto. Melden Sie sich bei Swiftype.com an.
2. Site -Suchmaschine mit einigen Daten.

Fügen Sie Folgendes in die Header Ihrer Webseite ein:

• Die neueste Version von JQuery
• Das Swiftype JQuery -Plugin
• (optional) Das Swiftype AutoComplete Stylesheet

Alles zusammen sollte es so aussehen:

 < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.autocomplete.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" autocomplete.css " media =" all " />

Hinweis: Dieser Client wurde nur für die API -Endpunkte der elastischen Site -Suche entwickelt. Sie können sich auf die Dokumentation der Elastic Site Search API beziehen, um einen zusätzlichen Kontext zu erhalten.

Verwendung

Wenden Sie einfach die SWIFTYPE -Methode auf Ihre Webseite auf ein vorhandenes Sucheingabebuch an. Fügen Sie es beispielsweise wie folgt zu einem Sucheingangsfeld mit dem ID st-search-input hinzu:

 $ ( '#st-search-input' ) . swiftype ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Stellen Sie sicher, dass Sie das oben gezeigte engineKey -Attribut so ändern, dass er dem einer Swiftype -Suchmaschine zugewiesen ist. Wenn Sie die Weboberfläche verwenden, ist die Suchmaschinenschlüssel auf der ersten Seite Ihres Dashboards aufgeführt.

Diese einfache Installation stimmt standardmäßig mit der Zeichenfolge überein, die ein Benutzer in Ihre Sucheingabe in eine der in Ihrer Suchmaschine indizierten Elemente eingibt. Standardmäßig wird die Zeichenfolge mit allen Feldern übereinstimmt, die Sie mit Typ string indiziert haben.

Anpassungs -Tutorial

Dieses Plugin wird basierend auf Ihrem spezifischen Anwendungsfall flexibel geschrieben. Sie möchten beispielsweise möglicherweise mehr Daten für jedes Element in der Dropdown -Down -Art abrufen, die Art und Weise anpassen, wie Daten dem Benutzer angezeigt werden, oder die automatische Abfrage an bestimmte Elemente Ihrer Suchmaschine einschränken.

Lassen Sie uns ein Beispiel durchgehen, das all dies tut. Nehmen wir bei diesem Beispiel an, dass Sie dem QuickStart -Tutorial für unser Ruby -Gem gefolgt sind, und jetzt haben Sie Daten für einen in Ihrer Beispielsuchmaschine indizierten Buchladen.

Ändern der Anzahl der Ergebnisse

Um die Anzahl der Ergebnisse anzugeben, die Sie von der API zurückgegeben werden möchten, legen Sie das resultLimit -Attribut wie folgt fest:

 $ ( '#st-search-input' ) . swiftype ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
  resultLimit : 20
} ) ;

Nur die von Ihnen angegebenen Felder abrufen

Um die Felder anzugeben, die Sie von der API zurückgegeben werden möchten, setzen Sie das fetchFields -Attribut auf einen Hash, der ein Array enthält, in dem die Felder aufgelistet sind, die Sie für jeden Dokumenttyp zurückgeben möchten. Wenn Sie beispielsweise Felder von title , genre und published_on haben, können Sie sie wie folgt zurückgeben lassen:

 $ ( '#st-search-input' ) . swiftype ( {
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Diese zusätzlichen Felder werden mit jedem Element in der Autokaponomplete zurückgegeben und können in der Rendering -Funktion zugreifen, wie im nächsten Abschnitt gezeigt.

Anpassen der Anzeige

Nachdem Sie mehr Daten für jedes AutoComplete -Element haben, möchten Sie die Element -Rendering -Funktion anpassen, um sie zu verwenden.

Die Standard -Rendering -Funktion ist unten dargestellt:

 var defaultRenderFunction = function ( document_type , item ) {
  return '<p class="title">' + Swiftype . htmlEscape ( item [ 'title' ] ) + '</p>' ;
} ;

Die zusätzlichen Felder sind als Schlüssel im Element -Wörterbuch verfügbar, sodass Sie dies anpassen können, um das genre wie folgt zu verwenden:

 var customRenderFunction = function ( document_type , item ) {
  var out = '<a href="' + Swiftype . htmlEscape ( item [ 'url' ] ) + '" class="st-search-result-link">' + item . highlight [ 'title' ] + '</a>' ;
  return out . concat ( '<p class="genre">' + item . highlight [ 'genre' ] + '</p>' ) ;
} ;

Legen Sie nun einfach das Attribut renderFunction im Options -Dictionary auf Ihre customRenderFunction ein, um unser Plugin zu sagen, dass Sie Ihre Funktion verwenden sollen, um Ergebnisse zu erzielen:

 $ ( '#st-search-input' ) . swiftype ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'url' ] } , // Fetch the URL field as a raw field.
  highlightFields : { 'books' : { 'title' : { 'size' : 60 , 'fallback' : true } , 'genre' : { 'size' : 60 , 'fallback' : true } , 'published_on' : { 'size' : 15 , 'fallback' : true } } } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 

Einschränkung der Übereinstimmung auf bestimmte Felder

Standardmäßig stimmt die Swiftype AutoComplete Library mit der Zeichenfolge überein, die der Benutzer in ein für Ihre Dokumente indizierter string -Feld eingeben. Wenn Sie also sicherstellen möchten, dass es nur Einsendungen im title übereinstimmt, können Sie beispielsweise die Option searchFields angeben:

 $ ( '#st-search-input' ) . swiftype ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  searchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Ähnlich wie bei der Option fetchFields akzeptiert searchFields einen Hash, der eine Reihe von Feldern für jeden document_type enthält, mit dem die Abfrage des Benutzers übereinstimmt.

Angabe zusätzlicher Abfragebedingungen

Nehmen wir nun an, Sie möchten nur, dass Ihre Autocomplete Bücher aus genre anzeigen und in_Stock sind. Um die Suchergebnisse einzuschränken, können Sie zusätzliche Abfragebedingungen an die Such -API weitergeben, indem Sie sie als Wörterbuch im Feld filters angeben. Mehrere Klauseln im Feld Filter werden mit und Logik kombiniert:

 $ ( '#st-search-input' ) . swiftype ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
  searchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Ändern dessen, was passiert, wenn ein Element in der Dropdown -Down -Stelle ausgewählt wird

Um das zu ändern, was beim Klicken auf ein Element passiert, müssen Sie eine onComplete -Handlerfunktion bereitstellen.

Wenn Sie standardmäßig auf ein Element in der Dropdown klicken, wird der folgende onComplete -Handler ausgeführt, der einen Benutzer zur url -Eigenschaft des ausgewählten Elements weiterleitet:

 var defaultOnComplete = function ( item , prefix ) {
  window . location = item [ 'url' ] ;
} ;

Um dies zu ändern, geben Sie einfach eine neue Handler -Funktion in der Option onComplete bei der Initialisierung Ihrer automatischen Vervollständigung an.

Hier ist ein Beispiel, das den Eingabewert mit dem Titel des ausgewählten Elements aktualisiert:

 var input ; // Save a reference to the autocomplete dropdown
input = $ ( '#st-search-input' ) . swiftype ( {
  onComplete : function ( selectedItem ) {
    input . val ( selectedItem [ 'title' ] ) ; // Update the autocomplete dropdown's value
  } ,
  fetchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 

FAQ?

Kann ich dies mit dem Swiftype -Such -Plugin verwenden?

Ja! Wenn Sie nach Kernsuchfunktionen suchen, finden Sie das Swiftype -Such -Plugin an.

Wo melde ich Probleme mit dem Kunden?

Wenn etwas nicht wie erwartet funktioniert, öffnen Sie bitte ein Problem.

Wo kann ich mehr über die Suche auf der Website erfahren?

Am besten lesen Sie die Dokumentation.

Wohin kann ich sonst noch Hilfe bekommen?

Sie können die Elastic Site Search Community -Community -Diskussionsforen ansehen.

Beitragen

Wir begrüßen die Mitwirkenden des Projekts. Bevor Sie beginnen, stellt ein paar Notizen ...

• Bevor Sie eine Pull -Anfrage eröffnen, erstellen Sie bitte ein Problem, um den Umfang Ihres Vorschlags zu besprechen.
• Bitte schreiben Sie gegebenenfalls einfachen Code und präzise Dokumentation.

Lizenz?

MIT © elastic

Vielen Dank an alle Mitwirkenden!