Criar sua própria barra de pesquisa de preenchimento automático é mais fácil do que você pensa.
Uma barra de pesquisa é um elemento de interface do usuário popular que muitos sites modernos utilizam. Se você estiver criando um site que contenha qualquer tipo de dados, talvez queira que seus usuários possam pesquisar itens específicos.
Há muitas maneiras de criar uma barra de pesquisa. Você pode criar barras de pesquisa complexas que retornam resultados com base em vários filtros, como nome ou data. As bibliotecas existentes podem ajudá-lo a implementar uma barra de pesquisa sem criá-la do zero.
No entanto, você também pode criar uma barra de pesquisa simples usando JavaScript simples, que compara a entrada de um usuário com uma lista de strings.
Como adicionar a interface do usuário para a barra de pesquisa
Seu site deve incluir uma caixa de entrada para seus usuários inserirem o texto que desejam pesquisar. Uma maneira de fazer isso é usar uma tag de entrada e estilizá-la para se parecer com uma barra de pesquisa.
- Crie uma pasta para armazenar seu site. Dentro da pasta, crie um arquivo HTML chamado index.html.
- Preencha seu arquivo com a estrutura básica de um documento HTML. Se você não estiver familiarizado com HTML, existem muitos Exemplos de código HTML que você pode aprender para ajudá-lo a se atualizar.
<!doctype html>
<html idioma ="pt-BR">
<cabeça>
<título>Barra de pesquisa</title>
</head>
<corpo>
<classe div ="recipiente">
<!-- O conteúdo da página da Web vai aqui-->
</div>
</body>
</html> - Dentro do div da classe do contêiner, adicione uma tag de entrada. Isso permitirá que o usuário digite o texto que deseja pesquisar. Sempre que eles inserirem um novo caractere, seu site chamará a função search(). Você criará essa função em etapas posteriores.
O atributo autocomplete garante que um navegador não adicionará seu próprio menu suspenso com base em termos de pesquisa anteriores.<classe div ="recipiente">
<h2>Pesquisar países</h2>
<id de entrada ="Barra de pesquisa" preenchimento automático="desligado" onkeyup="procurar()" tipo="texto"
nome="procurar" espaço reservado ="O que você está procurando?">
</div> - Na mesma pasta que o seu index.html arquivo, crie um novo arquivo CSS chamado estilos.css.
- Preencha o arquivo com estilo para a página da Web geral e a barra de pesquisa:
corpo {
margem: 0;
preenchimento: 0;
cor de fundo: #f7f7f7;
}
* {
família de fontes: "arial", sem serifa;
}
.recipiente {
preenchimento: 100px 25%;
exibição: flexível;
flex-direction: coluna;
altura da linha: 2rem;
tamanho da fonte: 1.2em;
cor: #202C39;
}
#Barra de pesquisa {
preenchimento: 15px;
raio da borda: 5px;
}
entrada[tipo=texto] {
-webkit-transition: largura 00,15sfacilidade de entrada;
transição: largura 00,15sfacilidade de entrada;
} - Em index.html, adicione um link para seu arquivo CSS dentro da tag head e abaixo da tag title:
<link rel ="folha de estilo" href="estilos.css"> - Abra o index.html arquivo em um navegador da Web e visualize a IU da sua barra de pesquisa.
Como criar as strings de lista para a barra de pesquisa
Antes que o usuário possa pesquisar, você precisará criar uma lista de itens disponíveis que eles podem pesquisar. Você pode fazer isso com uma matriz de strings. Uma string é uma das muitas tipos de dados que você pode usar em JavaScript, e pode representar uma sequência de caracteres.
Você pode criar esta lista dinamicamente usando JavaScript, enquanto a página está carregando.
- Dentro index.html, abaixo da tag de entrada, adicione um div. Este div exibirá um menu suspenso que conterá uma lista de itens que correspondem ao que o usuário está procurando:
<div id ="lista"></div> - Na mesma pasta que o seu index.html arquivo e estilos.css arquivo, crie um novo arquivo chamado script.js.
- Dentro script.js, crie uma nova função chamada loadSearchData(). Dentro da função, inicialize um array com uma lista de strings. Tenha em mente que esta é uma pequena lista estática. Uma implementação mais complexa terá que levar em consideração a pesquisa em conjuntos de dados maiores.
funçãoloadSearchData() {
// Dados a serem usados na barra de pesquisa
deixar países = [
'Austrália',
'Áustria',
'Brasil',
'Canadá',
'Dinamarca',
'Egito',
'França',
'Alemanha',
'EUA',
'Vietnã'
];
} - Dentro de loadSearchData() e abaixo da nova matriz, obtenha o elemento div que exibirá os itens de pesquisa correspondentes ao usuário. Dentro do div da lista, adicione uma tag âncora para cada item de dados na lista:
// Obtém o elemento HTML da lista
deixar lista = documento.getElementById('lista');
// Adiciona cada item de dados como um marcação
países.para cada((país)=>{
deixar um = documento.createElement("a");
a.innerText = país;
a.classList.add("listaItem");
lista.appendChild (a);
}) - Na etiqueta do corpo de index.html, inclua o atributo de evento onload para chamar a nova função loadSearchData(). Isso carregará os dados conforme a página é carregada.
<carga corporal ="loadSearchData()"> - Em index.html, antes que a tag do corpo termine, adicione uma tag de script para vincular ao seu arquivo JavaScript:
<carga corporal ="loadSearchData()">
<!-- O conteúdo da sua página da web -->
<script origem ="script.js"></script>
</body> - Em estilos.css, adicione um pouco de estilo à lista suspensa:
#lista {
borda: 1px cinza claro sólido;
raio da borda: 5px;
exibição: bloco;
}
.listItem {
exibição: flexível;
flex-direction: coluna;
decoração de texto: nenhum;
preenchimento: 5px 20px;
cor preta;
}
.listItem:flutuar {
cor de fundo: cinza claro;
} - Abrir index.html em um navegador da Web para visualizar sua barra de pesquisa e a lista de resultados de pesquisa disponíveis. A funcionalidade de pesquisa ainda não funciona, mas você deve ver a IU que ela usará:
Como criar o menu suspenso com resultados correspondentes na barra de pesquisa
Agora que você tem uma barra de pesquisa e uma lista de strings para os usuários pesquisar, pode adicionar a funcionalidade de pesquisa. À medida que o usuário digita na barra de pesquisa, apenas alguns itens da lista serão exibidos.
- Em estilos.css, substitua o estilo da lista para ocultar a lista por padrão:
#lista {
borda: 1px cinza claro sólido;
raio da borda: 5px;
Mostrar nenhum;
} - Em script.js, crie uma nova função chamada search(). Lembre-se de que o programa chamará essa função toda vez que o usuário inserir ou remover um caractere da barra de pesquisa. Alguns aplicativos precisarão de viagens a um servidor para buscar informações. Nesses casos, essa implementação pode tornar sua IU mais lenta. Pode ser necessário modificar a implementação para levar isso em consideração.
funçãoprocurar() {
// funcionalidade de pesquisa vai aqui
} - Dentro da função search(), obtenha o elemento HTML div para a lista. Obtenha também os elementos da tag âncora HTML de cada item dentro da lista:
deixar listaContainer = documento.getElementById('lista');
deixar listaItems = documento.getElementsByClassName('listItem'); - Obtenha a entrada que o usuário digitou na barra de pesquisa:
deixar entrada = documento.getElementById('barra de pesquisa').value
input = input.toLowerCase(); - Compare a entrada do usuário com cada item da lista. Por exemplo, se o usuário digitar "a", a função irá comparar se "a" está dentro de "Austrália", depois "Áustria", "Brasil", "Canadá" e assim por diante. Se corresponder, exibirá esse item na lista. Se não corresponder, ocultará esse item.
deixar semResultados = verdadeiro;
para (i = 0; eu < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (entrada) || entrada "") {
listItems[i].style.display="nenhum";
continuar;
}
outro {
listItems[i].style.display="flex";
semResultados = falso;
}
} - Se não houver nenhum resultado na lista, oculte a lista completamente:
listContainer.style.display = noResults? "nenhum": "bloquear"; - Clique no index.html arquivo para abri-lo em um navegador da web.
- Comece a digitar na barra de pesquisa. Conforme você digita, a lista de resultados será atualizada para exibir apenas os resultados correspondentes.
Usando uma barra de pesquisa para pesquisar resultados correspondentes
Agora que você sabe como criar uma barra de pesquisa com seleção de string, pode adicionar mais funcionalidades.
Por exemplo, você pode adicionar links às suas tags de âncora para abrir diferentes páginas, dependendo do resultado em que o usuário clicar. Você pode alterar sua barra de pesquisa para pesquisar objetos mais complexos. Você também pode modificar o código para funcionar com estruturas como React.
