input that complete word being typed

Asked

Viewed 121 times

0

all right?

I am trying to create a function in JS that as the user is typing in the input, it will complete ahead with suggestions, as it is a very large list of all nationalities of the world, there is no chance to open that basic select below hehe

Anyway, I don’t know how to create this effect, has anyone ever done? How?

Thanks in advance

abs.

javascript html self-cmplete

  • Put your code with what you’ve already done

  • @Max please insert into the question what you have already done (code) so that we can work on top.

1 answer

0


There is another alternative to jQuery-ui autocomplete, using only jQuery and a bit of 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>

Note that Javascript is case-sensitive, that is, you need to type the uppercase and lowercase letters the same way they are in the array.

When the rest of the word appears while typing, it can be confirmed by pressing "Enter".

The original script belongs to Ali Abdollahzade, and is available at https://codepen.io/2undercover/pen/wfBuL

I hope it helps.

  • Wow, that’s what I wanted hehe I’ll try to make it work here on my form, thank you very much leonardo.

Browser other questions tagged javascript html self-cmplete

You are not signed in. Login or sign up in order to post.