swiftype search jquery
v1.1.0
Ein Erstanbieter-JQuery-Plugin für Elastic Site Search für die Website-Suche.
Anforderungen:
Fügen Sie Folgendes in die Kopfzeile Ihrer Webseite ein:
Alles in allem sollte es so aussehen:
< script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />Hinweis: Dieser Client wurde nur für die Elastic Site Search API-Endpunkte entwickelt. Weiteren Kontext finden Sie in der Elastic Site Search API-Dokumentation.
Beginnen Sie damit, mindestens diese drei Elemente auf der Seite zu haben: ein Formular, ein Eingabefeld innerhalb des Formulars und einen Container für Ergebnisse.
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div > Wenden Sie die Swiftype-Methode auf ein vorhandenes Sucheingabefeld in einem Formular auf Ihrer Webseite an und stellen Sie einen Container für Ergebnisse bereit. Fügen Sie es beispielsweise wie folgt zu einem Sucheingabefeld mit der ID st-search-input hinzu:
$ ( '#st-search-input' ) . swiftypeSearch ( {
resultContainingElement : '#st-results-container' ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Stellen Sie sicher, dass Sie das oben gezeigte engineKey Attribut so ändern, dass es mit dem Ihrer Swiftype-Suchmaschine zugewiesenen übereinstimmt. Wenn Sie die Weboberfläche verwenden, wird der Suchmaschinenschlüssel auf der ersten Seite Ihres Dashboards aufgeführt.
Dieses Plugin ist so geschrieben, dass es je nach Ihrem spezifischen Anwendungsfall flexibel ist. Beispielsweise möchten Sie möglicherweise mehr Daten für jedes Ergebnis abrufen, die Art und Weise anpassen, wie Daten dem Benutzer angezeigt werden, oder die Suchabfrage auf bestimmte Elemente Ihrer Suchmaschine beschränken.
Lassen Sie uns ein Beispiel durchgehen, das all dies tut. Nehmen wir für dieses Beispiel an, dass Sie dem QuickStart-Tutorial für unser Ruby Gem gefolgt sind und nun Daten für einen Buchladen in Ihrer Beispielsuchmaschine indiziert haben.
Um die Anzahl der Ergebnisse pro Seite anzugeben, verwenden Sie das Attribut perPage .
$ ( '#st-search-input' ) . swiftypeSearch ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
perPage : 20
} ) ;Der maximale Wert, der von der API berücksichtigt wird, ist 100.
Alle Felder, die während einer Suche abgefragt werden, geben die oberste Übereinstimmung (falls vorhanden) in der Hervorhebungseigenschaft der Ergebnisse zurück. Alle Snippets in diesem Formular enthalten HTML-Entitäten aus dem codierten Originaltext. Die tatsächliche Hervorhebung wird mithilfe von (uncodierten) <em> -Tags angegeben.
Sie können anpassen, welche Felder in der Eigenschaft „highlight“ zurückgegeben werden, indem Sie die Option highlightFields verwenden:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ; Die Option highlightFields akzeptiert einen Hash, der die Felder enthält, die Sie für jedes Objekt jedes Dokumenttyps hervorheben möchten. Geben Sie für jedes Feld size als maximale Anzahl an Zeichen an, die im Snippet enthalten sein sollen. Setzen Sie fallback auf „true“, um die Einbeziehung eines nicht hervorgehobenen Snippets zu erzwingen, wenn für dieses Feld keine Hervorhebung verfügbar ist.
Ein weiteres Beispiel für highlightFields finden Sie in der Datei „custom.html“.
Um die Felder anzugeben, die von der API zurückgegeben werden sollen, legen Sie das fetchFields -Attribut auf einen Hash fest, der ein Array enthält, das die Felder auflistet, die für jeden Dokumenttyp zurückgegeben werden sollen. Wenn Sie beispielsweise für jedes Dokument die Felder title , genre und published_on indiziert haben, können Sie diese wie folgt zurückgeben:
$ ( '#st-search-input' ) . swiftypeSearch ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;Diese zusätzlichen Felder werden mit jedem Element zurückgegeben und können in der Rendering-Funktion aufgerufen werden, wie im nächsten Abschnitt gezeigt.
Da Sie nun über mehr Daten für jedes Ergebniselement verfügen, möchten Sie die Elementrenderingfunktion anpassen, um diese zu nutzen.
Die Standard-Rendering-Funktion ist unten dargestellt:
var defaultRenderFunction = function ( document_type , item ) {
return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ; Die zusätzlichen Felder sind als Schlüssel im Artikelwörterbuch verfügbar. Sie können dies also anpassen, um das Feld genre wie folgt zu verwenden:
var customRenderFunction = function ( document_type , item ) {
var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ; Setzen Sie nun einfach das Attribut renderFunction im Optionswörterbuch auf Ihre customRenderFunction , um unserem Plugin mitzuteilen, dass es Ihre Funktion zum Rendern von Ergebnissen verwenden soll:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Standardmäßig ordnet die Swiftype-Suchbibliothek die übermittelte Abfrage jeder string oder jedem text zu, das für Ihre Dokumente indiziert ist. Wenn Sie also sicherstellen möchten, dass beispielsweise nur Einträge im title übereinstimmen, können Sie die Option searchFields angeben:
$('#st-search-input').swiftypeSearch({
renderFunction: customRenderFunction,
fetchFields: {'books': ['title','genre','published_on']},
searchFields: {'books': ['title']},
engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});
Ähnlich wie die Option fetchFields akzeptiert searchFields einen Hash, der ein Array von Feldern für jeden Dokumenttyp enthält, mit dem die Abfrage des Benutzers übereinstimmen soll.
Nehmen wir nun an, Sie möchten, dass in Ihren Ergebnissen nur Bücher angezeigt werden, die dem Belletristik- genre angehören und in_stock sind. Um Suchergebnisse einzuschränken, können Sie zusätzliche Abfragebedingungen an die Such-API übergeben, indem Sie diese als Wörterbuch im filters angeben. Mehrere Klauseln im Filterfeld werden mit UND-Logik kombiniert:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;In einigen Fällen müssen Sie möglicherweise manuell eine neue Suche auslösen. Dazu kann die folgende Methode verwendet werden. Ein Beispiel für einen solchen Fall wäre, wenn ein Benutzer einen Filter anwenden möchte und eine neue Abfrage ausgeführt werden muss.
Swiftype.reloadResults();
Ja! Wenn Sie nach einer Funktion zur automatischen Vervollständigung suchen, schauen Sie sich das Swiftype Autocomplete-Plugin an.
Wenn etwas nicht wie erwartet funktioniert, öffnen Sie bitte ein Problem.
Am besten lesen Sie die Dokumentation.
Sie können sich die Diskussionsforen der Elastic Site Search-Community ansehen.
Wir freuen uns über Mitwirkende am Projekt. Bevor Sie beginnen, ein paar Anmerkungen ...
MIT © Elastic
Vielen Dank an alle Mitwirkenden!
