0

tudo bem?

estou tentando criar uma função em JS que conforme o usuário vai digitando no input, ela vai completando na frente com sugestões, como é uma lista muito grande de todas as nacionalidades do mundo, não rola abrir aquele select básico embaixo hehe

Enfim, não sei como criar esse efeito, alguém já fez? Como?

Valeu desde já

abs.

2
  • Coloque o seu código com o que já fez
    – Costamilam
    8/05/2019 às 23:44
  • @Max por gentileza insira na pergunta o que você já fez (código) para que possamos trabalhar em cima.
    – user148754
    9/05/2019 às 0:34

1 Resposta 1

0

Há outra alternativa ao autocomplete do jQuery-ui, utilizando apenas jQuery e um pouco de CSS.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <!-- jQuery 3 -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  <style type="text/css">
    body {
      direction: ltr;
      text-align: left;
    }
    body,
    input,
    textarea {
      font: 14px Tahoma, Verdana, Arial, sans-serif;
    }
    #container,
    #input,
    #complete{
      width: 512px;
      height: 32px;
      line-height: 32px;
      margin: 0 auto;
    }
    #container {
      position: relative;
    }
    #input,
    #complete{
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 8px;
      border: 2px solid #ddd;
      cursor: text;
    }
    #input:focus,
    #complete:focus{
      outline: none;
      border-color: #aaa;
    }
    #input {
      color: #333;
      background-color: transparent;
    }
    #complete {
      color: #999;
    }
  </style>
</head>

<body>

  <div id="container">
    <div id="complete"></div>
    <input type="text" id="input" placeholder="Digite uma dessas palavras: Vermelho, Verde, Branco, Amarelo, Preto, Laranja, Cinza, Lilás" autocomplete="Off">
  </div>

<script>
  var names = [
    'Vermelho',
    'Verde',
    'Branco',
    'Amarelo',
    'Preto',
    'Laranja',
    'Cinza',
    'Lilás'
  ];


var name = '';
$('#input').keyup(function(e) {
  var val = $(this).val();
  
  if(val == '') {
    $('#complete').text('');
    return;
  }

  if (e.which === 37 || e.which === 13) {
    e.preventDefault();
    $('#input').val(name);
    $('#complete').text('');
    return;
  }
  
  var find = false;
  for (var i = 0; i < names.length; i++) {
    name = names[i];
    if(name.indexOf(val) === 0) {
      find = true;
      break;
    } else {
      name = '';
    }
  }
  
  if(find === true) {
    $('#complete').text(name);
  } else {
    $('#complete').text('');
  }
})
</script>

</body>
</html>

Vale lembrar que o Javascript é case-sensitive, ou seja, você precisa digitar as letras maiúsculas e minúsculas da mesma maneira que estiverem no array.

Quando aparecer o restante da palavra ao digitar, a mesma pode ser confirmada pressionando "Enter".

O script original pertence a Ali Abdollahzade, e está disponível em https://codepen.io/2undercover/pen/wfBuL

Espero que ajude.

1
  • Nossa, era isso que eu queria hehe vou tentar fazer funcionar aqui no meu form, muito obrigado Leonardo.
    – Max
    10/05/2019 às 19:50

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .