Desafio do Autocomplete

Problema:

A forma como um médico interage com a tecnologia ao escrever uma prescrição é um dos pontos mais importantes para a Memed. Por dia, um médico realiza em média 40 prescrições, e ter uma ferramenta de prescrição com ótima interface, usabilidade e conteúdo resulta em melhor qualidade de trabalho e mais atenção para o paciente.

Uma das formas da Memed auxiliar ferramentas de parceiros no momento da prescrição é extendendo a usabilidade de campos de texto, os quais muitas vezes são utilizados por prontuários web.

Extender a usabilidade de um campo de texto significa:

• Ajudar o médico a encontrar medicamentos no momento da prescrição
• Possibilitar a inserção de textos pré-definidos
• Compreender o contexto e reagir a gatilhos de uso

Solução:

Criar uma página com um campos de texto (textarea), e quando o usuário digitar algo, posicionar um autocomplete logo abaixo do cursor (caret), sugerindo medicamentos. Quando um medicamento for clicado, inserir no campo de texto o nome e fabricante do medicamento.

Proposta:

A solução pode ser feita com ou sem frameworks front-end.

Fique a vontade para usar algum framework CSS (ex: Bootstrap, Material, Semantic UI).

Para enviar seu código, faça um fork deste repositório e nos avise quando concluir o desafio (:white_check_mark: as mensagens dos seus commits também serão analisadas).

Lembre-se de alterar o README.md com as instruções para rodar o projeto.

Não é necessário realizar uma busca verdadeira, será avaliada a interface (UI) e usabilidade (UX). Abaixo, segue uma lista de medicamentos para serem mostrados no autocomplete, independente do que for escrito pelo usuário:

[
	{
		fabricante: 'Roche',
		nome: 'Roacutan 20mg, Cápsula (30un)',
		precoMax: 22.10,
		precoMin: 20.99,
		principioAtivo: 'Isotretinoína 20mg',
		titularidade: 'Referência'
	},
	{
		fabricante: 'Sundown Vitaminas',
		nome: 'Vitamina C, comprimido (100un)',
		precoMax: 45.15,
		precoMin: 31.99,
		principioAtivo: 'Ácido Ascórbico',
		titularidade: 'Referência'
	},
	{
		fabricante: 'Sundown Vitaminas',
		nome: 'Vitamina C, comprimido (180un)',
		precoMax: 10.00,
		precoMin: 10.00,
		principioAtivo: 'Ácido Ascórbico',
		titularidade: 'Genérico'
	},
	{
		fabricante: 'EMS Sigma Pharma',
		nome: 'Itraspor 100mg, Cápsula (15un)',
		precoMax: 209.00,
		precoMin: 100.00,
		principioAtivo: 'Itraconazol 100mg',
		titularidade: 'Genérico'
	},
	{
		fabricante: 'EMS Sigma Pharma',
		nome: 'Itraspor 100mg, Cápsula (28un)',
		precoMax: 15.00,
		precoMin: 9.99,
		principioAtivo: 'Itraconazol 100mg',
		titularidade: 'Referência'
	},
	{
		fabricante: 'Abbott',
		nome: 'Cloridrato de sibutramina 15mg, Cápsula (30un)',
		precoMax: 40.00,
		precoMin: 40.00,
		principioAtivo: 'Cloridrato de sibutramina 15mg',
		titularidade: 'Genérico'
	},
	{
		fabricante: 'Abbott',
		nome: 'Cloridrato de sibutramina 15mg, Cápsula (100un)',
		precoMax: 200.00,
		precoMin: 100.00,
		principioAtivo: 'Cloridrato de sibutramina 15mg',
		titularidade: 'Referência'
	}
]

Para o visual do autocomplete, você deve seguir a imagem abaixo. ATENÇÃO NOS DETALHES VISUAIS (interface/layout), isso será o ponto principal analisado.

A fonte utilizada é a Open Sans.

Etapas:

1 - O usuário deverá visualizar o autocomplete assim que começar a digitar no campo de texto:

2 - Ao clicar em um medicamento, deverá ser adicionado ao campo de texto o nome e o fabricante:

3 - O autocomplete deverá seguir o cursor (apenas verticalmente):

Boa sorte and let’s code!

Ⓜ️ Equipe Memed