0
I am creating a form and would like to know some way where I start typing a word and it starts to show me suggestions, identical as it works travel shopping at the airport or on various websites
0
I am creating a form and would like to know some way where I start typing a word and it starts to show me suggestions, identical as it works travel shopping at the airport or on various websites
5
The name of it is autocomplete where there is an event detecting the writing , so it is done a search in a set of data already searched from the database or other place.
This creates a component to show this data that matches what has been typed so far.
I found this component :
Datalist [1]
It gets a set of options to be shown, this is a way to do something practical without too many complications.
<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>
But if you want something more customized I suggest imlementar with javascript ( jquery ) and ajax to search from the database the popular its component.
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
1
You can use an API of autocomplete of Jquery for that. Follow an example code:
<!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>
More details on documentation.
Browser other questions tagged javascript ajax
You are not signed in. Login or sign up in order to post.
The name of this is type Ahead or auto complete same. This answers your question?
– Jéf Bueno
Look at this you will need to use Ajax, take a look at this link and see if it helps you! https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_suggest_php
– Bsalvo