swiftype autocomplete jquery

Un premier site élastique de recherche de site élastique JQUery pour la recherche de recherche automatique.

Contenu

• Commencer
• Usage
• Tutoriel de personnalisation
• FAQ
• Contribuer
• Licence

---

Commencer ?

Exigences:

1. Compte de recherche de site. Inscrivez-vous sur swiftype.com.
2. Moteur de recherche de site avec certaines données.

Incluez ce qui suit dans l'en-tête de votre page Web:

• La dernière version de jQuery
• Le plugin swiftype jQuery
• (Facultatif) La feuille de style assortie de secours SwifType

Tous ensemble, cela devrait ressembler à ceci:

 < 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 " />

Remarque: ce client a été développé pour les points de terminaison de l'API de recherche de site élastique uniquement. Vous pouvez vous référer à la documentation de l'API de recherche de site élastique pour un contexte supplémentaire.

Usage

Appliquez simplement la méthode SwifType à un champ de saisie de recherche existant sur votre page Web. Par exemple, ajoutez-le à un champ de saisie de recherche avec id st-search-input comme suit:

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

Assurez-vous de modifier l'attribut engineKey ci-dessus pour correspondre à celui attribué à votre moteur de recherche Swiftype. Si vous utilisez l'interface Web, la touche de moteur de recherche est répertoriée sur la première page de votre tableau de bord.

Cette installation simple correspondra par défaut à la chaîne qu'un utilisateur tape dans votre entrée de recherche à l'un des éléments indexés dans votre moteur de recherche. Par défaut, la chaîne correspond à tous les champs que vous avez indexés avec string de type.

Tutoriel de personnalisation

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 élément de la liste déroulante, personnaliser la façon dont les données sont affichées à l'utilisateur ou restreindre la requête de saisie semi-automatique à certains éléments de votre moteur de recherche.

Passons à travers un exemple qui fait tout cela. Pour cet exemple, supposons que vous avez suivi le tutoriel QuickStart pour notre Ruby Gem, et maintenant vous avez des données pour une librairie indexée dans votre exemple de moteur de recherche.

Changer le nombre de résultats

Pour spécifier le nombre de résultats que vous aimeriez être retournés de l'API, définissez l'attribut resultLimit comme suit:

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

Récupérer uniquement les champs que vous spécifiez

Pour spécifier les champs que vous souhaitez retourner de l'API, définissez l'attribut fetchFields à un hachage contenant un tableau répertoriant les champs que vous souhaitez renvoyer pour chaque type de document. Par exemple, si vous avez indexé des champs title , genre et published_on pour chaque document, vous pouvez les faire retourner comme suit:

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

Ces champs supplémentaires seront retournés avec chaque élément dans la saisie semi-automatique, et ils peuvent être accessibles dans la fonction de rendu comme indiqué dans la section suivante.

Personnalisation de l'écran

Maintenant que vous avez plus de données pour chaque élément de saisie semi-automatique, vous voudrez personnaliser la fonction de rendu de l'élément pour en utiliser.

La fonction de rendu par défaut est illustrée ci-dessous:

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

Les champs supplémentaires sont disponibles sous forme de clés dans le dictionnaire d'articles, vous pouvez donc le personnaliser pour utiliser le champ genre comme suit:

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

Maintenant, définissez simplement l'attribut renderFunction dans le dictionnaire Options sur votre customRenderFunction pour dire à notre plugin d'utiliser votre fonction pour rendre les résultats:

 $ ( '#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'
} ) ; 

Restreindre la correspondance à des champs particuliers

Par défaut, la bibliothèque d'observation automatique SWIFTYPE correspondra à la chaîne que l'utilisateur tape à n'importe quel champ de string indexé pour vos documents. Donc, si vous souhaitez vous assurer qu'il ne correspond qu'à des entrées dans le champ title , par exemple, vous pouvez spécifier l'option searchFields :

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

De façon similaire à l'option fetchFields , searchFields accepte un hachage contenant un tableau de champs pour chaque document_type sur lequel vous souhaitez que la requête de l'utilisateur correspond.

Spécification des conditions de requête supplémentaires

Disons maintenant que vous voulez que votre assortie automatique affiche des livres qui sont du genre de fiction et sont dans_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 en tant que dictionnaire dans le champ filters . Plusieurs clauses dans le champ des filtres sont combinées avec et logique:

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

Modification de ce qui se passe lorsqu'un élément est sélectionné dans la liste déroulante

Afin de modifier ce qui se passe lorsque vous cliquez sur un élément, vous devez fournir une fonction onComplete Handler.

Par défaut, en cliquant sur un élément dans la liste déroulante, exécutera le gestionnaire onComplete suivant, qui achemine un utilisateur vers la propriété url de l'élément sélectionné:

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

Pour modifier cela, fournissez simplement une nouvelle fonction de gestionnaire dans l'option onComplete lors de l'initialisation de votre assortiment automatique.

Voici un exemple qui met à jour la valeur d'entrée avec le titre de l'élément sélectionné:

 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?

Puis-je l'utiliser avec le plugin de recherche SwifType?

Oui! Si vous recherchez des fonctionnalités de recherche de base, consultez le plugin de recherche SwifType.

Où dois-je signaler les problèmes avec le client?

Si quelque chose ne fonctionne pas comme prévu, veuillez ouvrir un problème.

Où puis-je en savoir plus sur la recherche de site?

Votre meilleur pari est de lire la documentation.

Où puis-je aller pour obtenir de l'aide?

Vous pouvez consulter la communauté de recherche de sites élastiques pour discuter des forums.

Contribuer

Nous accueillons des contributeurs au projet. Avant de commencer, quelques notes ...

• Avant d'ouvrir une demande de traction, veuillez créer un problème pour discuter de la portée de votre proposition.
• Veuillez écrire du code simple et de la documentation concise, le cas échéant.

Licence?

MIT © Elastic

Merci à tous les contributeurs!