swiftype autocomplete jquery

Un complemento de búsqueda del sitio elástico de primera parte para la búsqueda de autocompletar.

Contenido

• Empezando
• Uso
• Tutorial de personalización
• Preguntas frecuentes
• Contribuir
• Licencia

---

Empezando ?

Requisitos:

1. Cuenta de búsqueda del sitio. Regístrese en swiftype.com.
2. Motor de búsqueda del sitio con algunos datos en él.

Incluya lo siguiente en el encabezado de su página web:

• la última versión de jQuery
• el complemento de jQuery swiftype
• (Opcional) La hoja de estilo Swiftype Autocompleto

Todos juntos debería verse así:

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

Nota: Este cliente ha sido desarrollado solo para los puntos finales de la API de búsqueda elástica de sitios. Puede consultar la documentación de la API de búsqueda del sitio elástica para un contexto adicional.

Uso

Simplemente aplique el método Swiftype a un campo de entrada de búsqueda existente en su página web. Por ejemplo, agrégalo a un campo de entrada de búsqueda con ID st-search-input de la siguiente manera:

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

Asegúrese de cambiar el atributo engineKey que se muestra arriba para que coincida con el asignado a su motor de búsqueda Swiftype. Si está utilizando la interfaz web, la tecla de motor de búsqueda se enumera en la primera página de su tablero.

Esta simple instalación coincidirá por defecto la cadena que un usuario está escribiendo en su entrada de búsqueda en cualquiera de los elementos indexados en su motor de búsqueda. Por defecto, la cadena coincide con cualquier campo que haya indexado con string de tipo.

Tutorial de personalización

Este complemento está escrito para ser flexible en función de su caso de uso específico. Por ejemplo, es posible que desee recuperar más datos para cada elemento en el menú desplegable, personalizar la forma en que se muestran los datos al usuario o restringir la consulta de autocompletar a ciertos elementos de su motor de búsqueda.

Pasemos por un ejemplo que hace todo esto. Para este ejemplo, supongamos que siguió el tutorial QuickStart para nuestra gema Ruby, y ahora tiene datos para una librería indexada en su motor de búsqueda de ejemplo.

Cambiar el número de resultados

Para especificar el número de resultados que le gustaría devolver de la API, establezca el atributo resultLimit de la siguiente manera:

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

Obtener solo los campos que especifica

Para especificar los campos que desea devolver desde la API, establezca el atributo fetchFields en un hash que contenga una matriz que enumera los campos que desea devolver para cada tipo de documento. Por ejemplo, si ha indexado los campos de title , genre y published_on para cada documento, puede devolverlos de la siguiente manera:

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

Estos campos adicionales se devolverán con cada elemento en el autocompleto, y se puede acceder a ellos en la función de representación como se muestra en la siguiente sección.

Personalización de la pantalla

Ahora que tiene más datos para cada elemento de autocompleto, querrá personalizar la función de representación del elemento para usarlos.

La función de representación predeterminada se muestra a continuación:

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

Los campos adicionales están disponibles como claves en el diccionario de artículos, por lo que puede personalizar esto para utilizar el campo genre de la siguiente manera:

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

Ahora simplemente establezca el atributo renderFunction en el Diccionario de opciones en su customRenderFunction para decirle a nuestro complemento que use su función para obtener resultados:

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

Restringir la coincidencia a campos particulares

De manera predeterminada, la biblioteca Swiftype AutoComplete coincidirá con la cadena que el usuario está escribiendo en cualquier campo string indexado para sus documentos. Entonces, si desea asegurarse de que solo coincida con las entradas en el campo title , por ejemplo, puede especificar la opción searchFields :

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

De manera similar a la opción fetchFields , searchFields acepta un hash que contiene una matriz de campos para cada document_type en el que desea que la consulta del usuario coincida.

Especificando condiciones de consulta adicional

Ahora supongamos que solo quiere que su autocompleto muestre libros que sean del genre de ficción y que estén en_stock . Para restringir los resultados de búsqueda, puede pasar condiciones de consulta adicionales a la API de búsqueda especificándolas como un diccionario en el campo filters . Múltiples cláusulas en el campo Filtros se combinan con y lógica:

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

Cambiar lo que sucede cuando se selecciona un elemento en el menú desplegable

Para cambiar lo que sucede al hacer clic en un elemento, debe proporcionar una función de controlador onComplete .

De manera predeterminada, hacer clic en un elemento en el menú desplegable ejecutará el siguiente controlador onComplete , que enruta a un usuario a la propiedad url del elemento seleccionado:

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

Para cambiar esto, simplemente proporcione una nueva función de controlador en la opción onComplete al inicializar su autocompleto.

Aquí hay un ejemplo que actualiza el valor de entrada con el título del elemento seleccionado:

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

Preguntas frecuentes?

¿Puedo usar esto con el complemento de búsqueda Swiftype?

¡Sí! Si está buscando la funcionalidad de búsqueda de núcleo, consulte el complemento de búsqueda Swiftype.

¿Dónde reporto problemas con el cliente?

Si algo no funciona como se esperaba, abra un problema.

¿Dónde puedo obtener más información sobre la búsqueda del sitio?

Su mejor opción es leer la documentación.

¿A dónde más puedo ir para obtener ayuda?

Puede consultar la comunidad de búsqueda de sitios elástica discutir los foros.

Contribuir

Agradecemos a los contribuyentes al proyecto. Antes de comenzar, un par de notas ...

• Antes de abrir una solicitud de extracción, cree un problema para discutir el alcance de su propuesta.
• Escriba el código simple y la documentación concisa, cuando sea apropiado.

Licencia?

MIT © elástico

¡Gracias a todos los contribuyentes!