swiftype search jquery
v1.1.0
Um plugin jQuery do Elastic Site Search para pesquisa de sites.
Requisitos:
Inclua o seguinte no cabeçalho da sua página da web:
Todos juntos devem ficar assim:
< 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 " />Observação: este cliente foi desenvolvido apenas para endpoints da API do Elastic Site Search. Você pode consultar a documentação da API do Elastic Site Search para obter contexto adicional.
Comece tendo pelo menos estes três elementos na página: um formulário, um campo de entrada dentro do formulário e um contêiner para resultados.
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div > Aplique o método swifttype a um campo de entrada de pesquisa existente em um formulário em sua página da web e forneça um contêiner para resultados. Por exemplo, adicione-o a um campo de entrada de pesquisa com id st-search-input da seguinte maneira:
$ ( '#st-search-input' ) . swiftypeSearch ( {
resultContainingElement : '#st-results-container' ,
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.
Este plugin foi escrito para ser flexível com base no seu caso de uso específico. Por exemplo, você pode querer recuperar mais dados para cada resultado, personalizar a forma como os dados são exibidos ao usuário ou restringir a consulta de pesquisa a determinados elementos do seu mecanismo de pesquisa.
Vejamos um exemplo que faz tudo isso. Para este exemplo, vamos supor que você seguiu o tutorial QuickStart para nosso Ruby Gem e agora tem dados de uma livraria indexados em seu mecanismo de pesquisa de exemplo.
Para especificar o número de resultados por página, use o atributo perPage .
$ ( '#st-search-input' ) . swiftypeSearch ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
perPage : 20
} ) ;O valor máximo que será respeitado pela API é 100.
Quaisquer campos consultados durante uma pesquisa retornarão a correspondência superior (se houver) na propriedade de destaque dos resultados. Todos os trechos neste formulário possuem entidades HTML do texto original codificadas. O realce real é especificado usando tags <em> (não codificadas).
Você pode personalizar quais campos são retornados na propriedade destaque usando a opção highlightFields :
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ; A opção highlightFields aceita um hash contendo os campos que você deseja destacar para cada objeto de cada tipo de documento. Para cada campo, especifique size como o número máximo de caracteres a serem incluídos no snippet. Defina fallback como verdadeiro para forçar a inclusão de um snippet não destacado se um destaque não estiver disponível para esse campo.
Consulte o arquivo custom.html para obter um exemplo adicional de highlightFields .
Para especificar os campos que você gostaria de retornar da API, defina o atributo fetchFields como um hash contendo uma matriz listando os campos que você deseja retornar para cada tipo de documento. Por exemplo, se você tiver indexado os campos title , genre e published_on para cada documento, poderá retorná-los da seguinte maneira:
$ ( '#st-search-input' ) . swiftypeSearch ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;Esses campos adicionais serão retornados com cada item e podem ser acessados na função de renderização conforme mostrado na próxima seção.
Agora que você tem mais dados para cada item de resultado, você desejará personalizar a função de renderização de item para utilizá-los.
A função de renderização padrão é mostrada abaixo:
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>' ;
} ; Os campos adicionais estão disponíveis como chaves no dicionário de itens, então você pode personalizar isso para usar o campo genre da seguinte maneira:
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>' ) ;
} ; Agora basta definir o atributo renderFunction no dicionário de opções como customRenderFunction para dizer ao nosso plugin para usar sua função para renderizar resultados:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Por padrão, a biblioteca de pesquisa Swiftype corresponderá a consulta enviada a qualquer string ou campo text indexado para seus documentos. Portanto, se quiser garantir que ele corresponda apenas às entradas no campo title , por exemplo, você pode especificar a opção searchFields :
$('#st-search-input').swiftypeSearch({
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 document_type ao qual você deseja que a consulta do usuário corresponda.
Agora, digamos que você queira que seus resultados exibam apenas livros do genre ficção e que estejam em estoque . Para restringir os resultados da pesquisa, você pode passar condições de consulta adicionais para a API de pesquisa, especificando-as como um dicionário no campo filters . Várias cláusulas no campo de filtros são combinadas com a lógica AND:
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;Em alguns casos, pode ser necessário acionar manualmente uma nova pesquisa. O método a seguir pode ser usado para fazer isso. Um exemplo de tal caso seria se um usuário escolhesse aplicar um filtro e uma nova consulta precisasse ser executada.
Swiftype.reloadResults();
Sim! Se você está procurando a funcionalidade de preenchimento automático, verifique o plug-in Swiftype Autocomplete.
Se algo não estiver funcionando conforme o esperado, abra um problema.
Sua melhor aposta é ler a documentação.
Você pode conferir os fóruns de discussão da comunidade do Elastic Site Search.
Congratulamo-nos com colaboradores do projeto. Antes de começar, algumas notas...
MIT © Elástica
Obrigado a todos os colaboradores!
