Há cerca de uma semana, escrevi um tutorial para Implementação de uma pesquisa typeahead com Node.js e jQuery. Um typeahead é um dos muitos casos de uso excelentes ao usar a pesquisa de texto completo (FTS), mas certamente não é o único caso de uso. Como muitos de vocês sabem, sou um grande fã do Golang e do Node.js, então achei que seria uma boa ideia ver o mesmo exemplo, mas desta vez usando uma tecnologia de programação diferente.
Veremos como usar o typeahead.jsuma extensão do jQuery, bem como Couchbase e a linguagem de programação Go para implementar um tipo de preenchimento automático em nosso aplicativo.
Se você não viu meu Artigo anteriorNão se preocupe, pois é uma linguagem diferente e, portanto, um problema diferente. Vamos começar do zero e ver como as coisas são feitas com o Go. Pressupõe-se que você tenha o Go instalado e configurado, bem como o Couchbase instalado e configurado.
Preparação de um conjunto de dados e de um índice de pesquisa de texto completo
Para este exemplo, trabalharemos com um conjunto de dados muito simples, mas ele poderia ser significativamente mais complexo com um mínimo de esforço extra. Nosso conjunto de dados será parecido com o seguinte:
|
1 2 3 4 5 |
{ "título": "Forever & Always" (Para sempre e sempre), "artista": "Taylor Swift", "tipo": "música" } |
Cada documento em nosso banco de dados representará uma música. Para simplificar, vamos nos concentrar apenas no documento título e artista informações, mas os documentos podem conter uma grande variedade de informações.
A próxima etapa é criar um índice FTS para nossos documentos.
A imagem acima demonstra como deve ser um índice. No que se refere ao mapeamento de tipos, vamos mapear apenas o tipo música documentos. Também estamos especificando que queremos apenas o artista e título informações em nosso índice. A parte importante aqui é que estamos armazenando os campos no índice. Se não optarmos especificamente por armazenar o campo no índice, não teremos informações para preencher nos resultados da pesquisa.
Criação do back-end do Go Powered Full Text Search (FTS)
Com alguns dados e nosso índice FTS instalados, podemos começar a desenvolver o backend que executará as consultas. Nosso backend será uma API RESTful com um único endpoint para pesquisa. O boilerplate para esse aplicativo pode ser visto abaixo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
pacote principal importação ( "encoding/json" "net/http" "github.com/gorilla/handlers" "github.com/gorilla/mux" gocb "gopkg.in/couchbase/gocb.v1" "gopkg.in/couchbase/gocb.v1/cbft" ) tipo Canção estrutura { Id string `json:"id"` Pontuação flutuante64 `json:"pontuação"` Artista string `json:"artista"` Título string `json:"título"` } var balde *gocb.Balde func SearchEndpoint(resposta http.Escritor de respostas, solicitação *http.Solicitação) { } func principal() { agrupamento, _ := gocb.Conectar("couchbase://localhost") agrupamento.Autenticar(gocb.PasswordAuthenticator{Nome de usuário: "exemplo", Senha: "123456"}) balde, _ = agrupamento.OpenBucket("exemplo", "") roteador := mux.NewRouter() roteador.HandleFunc("/search", SearchEndpoint).Métodos("GET") http.Ouvir e servir(":12345", manipuladores.CORS(manipuladores.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization" (Autorização)}), manipuladores.AllowedMethods([]string{"GET", "POST", "PUT", "CABEÇA", "OPTIONS"}), manipuladores.Origens permitidas([]string{"*"}))(roteador)) } |
Primeiro, estamos criando uma estrutura de dados nativa em Go que, por fim, conterá nossos resultados de pesquisa previstos. Ignorando a lógica do endpoint por enquanto, temos nosso principal na qual nos conectamos ao nosso banco de dados e definimos nosso único ponto de extremidade. Como a pesquisa será feita via JavaScript, precisamos configurar o compartilhamento de recursos entre origens (CORS) para permitir as solicitações.
Se quiser saber mais sobre o compartilhamento de recursos entre origens com Go, escrevi um artigo sobre Artigo anterior sobre o assunto. Entretanto, conhecer os detalhes não é muito importante para este exemplo.
Vamos dar uma olhada na função que importa:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
func SearchEndpoint(resposta http.Escritor de respostas, solicitação *http.Solicitação) { resposta.Cabeçalho().Conjunto("content-type", "application/json") parâmetros := solicitação.URL.Consulta() consulta := gocb.NewSearchQuery("idx-music", cbft.NewMatchQuery(parâmetros.Obter("query" (consulta)))) consulta.Campos("artista", "título") resultado, _ := balde.ExecuteSearchQuery(consulta) var sucessos []Canção para _, atingido := alcance resultado.Acertos() { sucessos = anexar(sucessos, Canção{ Id: atingido.Id, Pontuação: atingido.Pontuação, Artista: atingido.Campos["artista"], Título: atingido.Campos["título"], }) } json.Novo codificador(resposta).Codificar(sucessos) } |
Quando essa função é chamada, extraímos todos os parâmetros dos parâmetros de consulta da solicitação. Esses parâmetros são usados para criar uma nova consulta em nosso índice de pesquisa de texto completo. Na resposta, queremos que tanto o artista e título portanto, devemos defini-los em nossa consulta. Após a execução bem-sucedida, percorremos os resultados da pesquisa e construímos um objeto que pode ser útil para o nosso frontend.
Se você quisesse executar o aplicativo Go, http://localhost:12345/search?query=swift pode potencialmente retornar resultados.
Projetando o front-end jQuery para pesquisas Typeahead no banco de dados
Com o backend pronto, agora podemos nos concentrar no frontend. O frontend será universal, independentemente de qual linguagem de backend que você vai usar.
Nosso objetivo é criar algo assim:
Vamos usar typeahead.js, jQuerye Guidão.js para que essa parte seja um sucesso. No entanto, é muito importante que usemos a versão 0.10.5 do typeahead.js devido a um bug em versões posteriores.
Com as bibliotecas baixadas, crie uma estrutura de projeto semelhante à seguinte:
|
1 2 3 4 5 |
js guidão-v4.0.11.js jquery-3.3.1.min.js typeahead.feixe.min.js índice.html |
Certifique-se de que suas versões correspondam às versões de seus arquivos e não às minhas.
No index.html podemos inicializar nosso código com o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <cabeça> <style> corpo { Cor de fundo: #F0F0F0; } .tt-input, .tt-hint, .twitter-typeahead { largura: 100%; } </style> </cabeça> <corpo> <div id="remoto"> <entrada classe="typeahead" tipo="texto" espaço reservado="Músicas..."> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/handlebars-v4.0.11.js"></script> <script src="js/typeahead.0.10.5.bundle.min.js"></script> <script> // Lógica aqui </script> </corpo> </html> |
Observe que o código acima contém essencialmente apenas uma entrada de formulário e a importação de todas as nossas bibliotecas. Eu recomendei onde nossa lógica para o typeahead terminará.
Vamos encerrar esse assunto com nossa lógica:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$('#remote .typeahead').typeahead( { dica: verdadeiro, minLength: 3, destaque: falso, limite: 5 }, { nome: "música", displayKey: "id", fonte: função (consulta, retorno de chamada) { $.getJSON("http://localhost:12345/search?query=" + consulta, função (dados) { retorno retorno de chamada(dados); }); }, modelos: { sugestão: Guidão.compilar('<div>{{title}} - {{artista}}</div>') } } ); |
A primeira parte do nosso typeahead é a configuração. Estamos dizendo que queremos que as dicas sejam exibidas e que nossa lógica não ocorrerá a menos que haja pelo menos três caracteres na pesquisa para economizar em chamadas remotas. Não destacaremos os resultados, mas os limitaremos a cinco. Para conduzir a lógica do nosso typeahead, emitiremos uma solicitação ao nosso backend e processaremos a resposta. Ela será renderizada com base em nosso modelo personalizado do Handlebars.
O displayKey é o que queremos mostrar depois que um resultado é clicado. Em nosso cenário, queremos mostrar os artistas e os títulos das músicas, mas preencher o ID quando clicado. Dessa forma, o ID pode ser enviado em uma solicitação futura, se quisermos.
Conclusão
Você acabou de ver como criar uma pesquisa typeahead em jQuery com Go como backend e Couchbase como o banco de dados NoSQL. Esse tutorial foi uma continuação de um tutorial anterior onde escrevi o back-end do FTS com Node.js e JavaScript.
Para obter mais informações sobre como usar o Go SDK com o Couchbase, consulte a seção Portal do desenvolvedor do Couchbase.
