Estou criando um formulário e gostaria de saber alguma forma onde eu começo a digitar uma palavra e ela começa a me mostra sugestões, idêntico como funciona o de compras de viagem no aeroporto ou em sites diversos
-
O nome disto é type ahead ou auto complete mesmo. Isso responde sua dúvida?– Jéf BuenoCommented 27/04/2017 às 13:48
-
Olha para isso você vai precisar usar Ajax, da uma olhada neste link e ve se te ajuda! w3schools.com/js/tryit.asp?filename=tryjs_ajax_suggest_php– BsalvoCommented 27/04/2017 às 13:54
2 Respostas
O nome disso é autocomplete onde há um evento detectando a escrita , com isso é feito uma busca em um conjunto de dados já buscados do banco de dados ou outro local.
Com isso é criado um componente para mostrar esses dados que casam com o que foi digitado até o momento.
Encontrei esse componente :
Datalist [1]
Ele recebe um conjunto de opções para serem mostradas , essa é um forma para fazer algo prático sem muitas complicações.
<label for="browser">Qual navegador está utilizando?</label>
<input id="browser" list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
Mas se quer algo mais customizado sugiro imlementar com javascript ( jquery ) e ajax para buscar do banco o popular seu componente.
[1] https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/datalist
Você pode utilizar uma API de autocomplete do JQuery para isso. Segue um código de exemplo:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableCountrys = [
"Argentina",
"Argélia",
"Alemanha",
"Brasil",
"Chile",
"Colômbia",
"Equador"
];
$( "#country" ).autocomplete({
source: availableCountrys
});
} );
</script>
</head>
<body>
<div>
<label for="country">País: </label>
<input id="country">
</div>
</body>
</html>
Maiores detalhes na documentação.