swiftype search jquery
v1.1.0
Un plugin jQuery Elastic Site Search propriétaire pour la recherche de sites Web.
Exigences:
Incluez les éléments suivants dans l'en-tête de votre page Web :
Au total, cela devrait ressembler à ceci :
< 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 " />Remarque : Ce client a été développé uniquement pour les points de terminaison de l'API Elastic Site Search. Vous pouvez vous référer à la documentation de l'API Elastic Site Search pour plus de contexte.
Commencez par avoir au moins ces trois éléments sur la page : un formulaire, un champ de saisie dans le formulaire et un conteneur pour les résultats.
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div > Appliquez la méthode Swiftype à un champ de saisie de recherche existant dans un formulaire de votre page Web et fournissez un conteneur pour les résultats. Par exemple, ajoutez-le à un champ de saisie de recherche avec l'identifiant st-search-input comme suit :
$ ( '#st-search-input' ) . swiftypeSearch ( {
resultContainingElement : '#st-results-container' ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Assurez-vous de modifier l'attribut engineKey indiqué ci-dessus pour qu'il corresponde à celui attribué à votre moteur de recherche Swiftype. Si vous utilisez l'interface web, la clé du moteur de recherche est répertoriée sur la première page de votre tableau de bord.
Ce plugin est écrit pour être flexible en fonction de votre cas d'utilisation spécifique. Par exemple, vous souhaiterez peut-être récupérer plus de données pour chaque résultat, personnaliser la façon dont les données sont affichées à l'utilisateur ou limiter la requête de recherche à certains éléments de votre moteur de recherche.
Passons en revue un exemple qui fait tout cela. Pour cet exemple, supposons que vous ayez suivi le didacticiel QuickStart pour notre Ruby Gem et que vous disposiez désormais de données pour une librairie indexées dans votre exemple de moteur de recherche.
Pour spécifier le nombre de résultats par page, utilisez l'attribut perPage .
$ ( '#st-search-input' ) . swiftypeSearch ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
perPage : 20
} ) ;La valeur maximale qui sera honorée par l'API est de 100.
Tous les champs interrogés lors d'une recherche renverront la première correspondance (le cas échéant) dans la propriété de surbrillance des résultats. Tous les extraits de ce formulaire contiennent des entités HTML codées à partir du texte original. La mise en évidence réelle est spécifiée à l'aide de balises <em> (non codées).
Vous pouvez personnaliser les champs renvoyés dans la propriété highlight à l'aide de l'option highlightFields :
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ; L'option highlightFields accepte un hachage contenant les champs que vous souhaitez mettre en surbrillance pour chaque objet de chaque type de document. Pour chaque champ, spécifiez size comme nombre maximum de caractères à inclure dans l'extrait. Définissez fallback sur true pour forcer l’inclusion d’un extrait non mis en surbrillance si une mise en surbrillance n’est pas disponible pour ce champ.
Consultez le fichier custom.html pour un exemple supplémentaire de highlightFields .
Pour spécifier les champs que vous souhaitez renvoyer de l'API, définissez l'attribut fetchFields sur un hachage contenant un tableau répertoriant les champs que vous souhaitez renvoyer pour chaque type de document. Par exemple, si vous avez indexé les champs title , genre et published_on pour chaque document, vous pouvez les renvoyer comme suit :
$ ( '#st-search-input' ) . swiftypeSearch ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;Ces champs supplémentaires seront renvoyés avec chaque élément et seront accessibles dans la fonction de rendu comme indiqué dans la section suivante.
Maintenant que vous disposez de plus de données pour chaque élément de résultat, vous souhaiterez personnaliser la fonction de rendu des éléments pour les utiliser.
La fonction de rendu par défaut est présentée ci-dessous :
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>' ;
} ; Les champs supplémentaires sont disponibles sous forme de clés dans le dictionnaire d'éléments, vous pouvez donc les personnaliser pour utiliser le champ genre comme suit :
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>' ) ;
} ; Maintenant, définissez simplement l'attribut renderFunction dans le dictionnaire d'options sur votre customRenderFunction pour indiquer à notre plugin d'utiliser votre fonction pour restituer les résultats :
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Par défaut, la bibliothèque de recherche Swiftype fera correspondre la requête soumise à n'importe quelle string ou champ text indexé pour vos documents. Ainsi, si vous souhaitez vous assurer qu'il ne correspond qu'aux entrées du champ title , par exemple, vous pouvez spécifier l'option searchFields :
$('#st-search-input').swiftypeSearch({
renderFunction: customRenderFunction,
fetchFields: {'books': ['title','genre','published_on']},
searchFields: {'books': ['title']},
engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});
De la même manière que l'option fetchFields , searchFields accepte un hachage contenant un tableau de champs pour chaque type de document sur lequel vous souhaitez que la requête de l'utilisateur corresponde.
Supposons maintenant que vous souhaitiez que vos résultats affichent uniquement des livres du genre fiction et in_stock . Afin de restreindre les résultats de recherche, vous pouvez transmettre des conditions de requête supplémentaires à l'API de recherche en les spécifiant sous forme de dictionnaire dans le champ filters . Plusieurs clauses dans le champ des filtres sont combinées avec la logique ET :
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;Dans certains cas, vous devrez peut-être déclencher manuellement une nouvelle recherche. La méthode suivante peut être utilisée pour ce faire. Un exemple d'un tel cas serait si un utilisateur choisit d'appliquer un filtre et qu'une nouvelle requête doit être exécutée.
Swiftype.reloadResults();
Oui! Si vous recherchez une fonctionnalité de saisie semi-automatique, consultez le plugin Swiftype Autocomplete.
Si quelque chose ne fonctionne pas comme prévu, veuillez ouvrir un problème.
Le mieux est de lire la documentation.
Vous pouvez consulter les forums de discussion de la communauté Elastic Site Search.
Nous accueillons les contributeurs au projet. Avant de commencer, quelques notes...
MIT © Élastique
Merci à tous les contributeurs !
