Text suggestion

Asked

Viewed 339 times

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

javascript ajax

  • The name of this is type Ahead or auto complete same. This answers your question?

  • 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

2 answers

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.