Text suggestion [closed]

Question

Text suggestion [closed]

Navigation

#1 by (5 votes)
#2 by (1 votes)

0

I'm 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 does the travel shopping at the airport or at various websites

javascript ajax

asked by anonymous 27.04.2017 / 15:45

2 answers

How to change the class of a button according to its id and value? Hide field required and not required

score 5 · Answer 1

The name of this is autocomplete where there is an event detecting writing, so a search is performed on a set of already searched data from the database or another location.

This will create a component to display 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 popular bank its component.

[1] link

score 1 · Answer 2

You can use a JQuery autocomplete API for this. Here is 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><scriptsrc="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>