swiftype autocomplete jquery

Um plug-in JQuery de pesquisa elástico de primeira partida para preenchimento automático de pesquisa.

Conteúdo

• Começando
• Uso
• Tutorial de personalização
• Perguntas frequentes
• Contribuir
• Licença

---

Começando ?

Requisitos:

1. Conta de pesquisa do site. Inscreva -se no swiftype.com.
2. Mecanismo de pesquisa do site com alguns dados nele.

Inclua o seguinte no cabeçalho da sua página da web:

• a versão mais recente do jQuery
• O plugin jQuery Swiftype
• (Opcional) A folha de estilo Swiftype AutoComplete

Todos juntos devem ficar assim:

 < 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 foi desenvolvido apenas para os pontos de extremidade da API de pesquisa de site elástico. Você pode consultar a documentação da API de pesquisa de site elástico para um contexto adicional.

Uso

Basta aplicar o método SWIFTYPE em um campo de entrada de pesquisa existente na sua página da web. Por exemplo, adicione-o a um campo de entrada de pesquisa com ID st-search-input da seguinte forma:

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

Certifique -se de alterar o atributo engineKey mostrado acima para corresponder ao atribuído ao seu mecanismo de pesquisa SWIFTYPE. Se você estiver usando a interface da web, a chave do mecanismo de pesquisa estará listada na primeira página do seu painel.

Essa instalação simples, por padrão, corresponderá à string que um usuário está digitando em sua entrada de pesquisa em qualquer um dos itens indexados no seu mecanismo de pesquisa. Por padrão, a string é correspondida em relação a quaisquer campos que você indexou com string do tipo.

Tutorial de personalização

Este plug-in é escrito para ser flexível com base no seu caso de uso específico. Por exemplo, você pode recuperar mais dados para cada elemento no menu suspenso, personalizar a maneira como os dados são exibidos para o usuário ou restringem a consulta autocompleta a certos elementos do seu mecanismo de pesquisa.

Vamos passar por um exemplo que faz tudo isso. Neste exemplo, vamos supor que você seguisse o tutorial do QuickStart para nossa gema Ruby e agora você tem dados para uma livraria indexada em seu exemplo de mecanismo de pesquisa.

Alterando o número de resultados

Para especificar o número de resultados que você gostaria de retornar da API, defina o atributo resultLimit da seguinte forma:

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

Buscando apenas os campos que você especifica

Para especificar os campos que você gostaria de devolver da API, defina o atributo fetchFields para um hash que contém uma matriz listando os campos que você deseja devolver para cada tipo de documento. Por exemplo, se você tiver title indexado, genre e campos published_on para cada documento, poderá retornar da seguinte forma:

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

Esses campos adicionais serão devolvidos com cada item no preenchimento automático e podem ser acessados ​​na função de renderização, conforme mostrado na próxima seção.

Personalizando a tela

Agora que você tem mais dados para cada item de preenchimento automático, você deseja personalizar a função de renderização do item para usá -los.

A função de renderização padrão é mostrada abaixo:

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

Os campos adicionais estão disponíveis como chaves no dicionário de itens, para que você possa personalizá -lo para usar o campo genre da seguinte forma:

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

Agora basta definir o atributo renderFunction no Dicionário de Opções para sua Função customRenderFunction para dizer ao nosso plug -in para usar sua função para renderizar 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'
} ) ; 

Restringindo a correspondência com campos específicos

Por padrão, a biblioteca AutoComplete Swiftype corresponderá à string que o usuário está digitando com qualquer campo de string indexado para seus documentos. Portanto, se você deseja garantir que ele corresponda apenas a entradas no campo title , por exemplo, você pode especificar a opção searchFields :

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

Da mesma forma que a opção fetchFields , searchFields aceita um hash contendo uma matriz de campos para cada documento_type no qual você gostaria que a consulta do usuário corresponda.

Especificando condições de consulta adicionais

Agora, digamos que você só queira que seu preenchimento automático exiba livros que são do genre de ficção e estão in_stock . Para restringir os resultados da pesquisa, você pode passar condições adicionais de consulta para a API de pesquisa especificando -os como um dicionário no campo filters . Várias cláusulas no campo Filters são combinadas e 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'
} ) ;

Alterando o que acontece quando um item é selecionado no suspensão

Para alterar o que acontece ao clicar em um item, você precisa fornecer uma função de manipulador onComplete .

Por padrão, clicar em um item no menu suspenso executará o seguinte manipulador onComplete , que direciona um usuário para a propriedade url do item selecionado:

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

Para alterar isso, basta fornecer uma nova função de manipulador na opção onComplete ao inicializar o preenchimento automático.

Aqui está um exemplo que atualiza o valor de entrada com o título do item selecionado:

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

PERGUNTAS FREQUENTES ?

Posso usar isso com o plug -in de pesquisa SWIFTYPE?

Sim! Se você estiver procurando por funcionalidade de pesquisa principal, consulte o plug -in de pesquisa do Swiftype.

Onde eu relato problemas com o cliente?

Se algo não estiver funcionando como esperado, abra um problema.

Onde posso aprender mais sobre a pesquisa de site?

Sua melhor aposta é ler a documentação.

Onde mais posso ir para obter ajuda?

Você pode conferir a comunidade de pesquisa de sites elásticos discutir os fóruns.

Contribuir

Congratulamo -nos com colaboradores do projeto. Antes de começar, algumas notas ...

• Antes de abrir uma solicitação de tração, crie um problema para discutir o escopo da sua proposta.
• Escreva código simples e documentação concisa, quando apropriado.

Licença?

MIT © Elastic

Obrigado a todos os colaboradores!