___ ___ erkimt Materialize Javascript autocomplete ______ qstntxt ___

I'm using the materialize framework. According to the documentation, I can use "autocomplete" in the form tag according to the Materialize Form link. My question, is this I want to create a javascript for autocomplete of extensions, example: @ gmail.com, @ outlook.com, @ hotmail.com. When the user says "@" this list appears. Below my code

%pre%

Javascript:

%pre%     

______ azszpr300761 ___

As I researched, autocomplete does not yet have a feature to show suggestions only after a certain user input. I saw that it's on the list of plugin upgrades.

If I understand what you need, follow an alternative ...

Note: The plugin's default operation has been modified.

%pre% %pre% %pre%

    

___

//Função para autocomplete do email
$(document).ready(function() {
  //pegando o id do formulario
  $('#emailAux').autocomplete({
    //Aqui declaro algumas possiveis extensoes de email para autocompletar
    data: {
      '@hotmail.com': null,
      '@gmail.com': null,
      '@outlook.com': null
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Função quando é valido ou seja completado!
      //alert("ok");
    },
    minLength: 1 // The minimum length of the input for the autocomplete to start. Default: 1.
  });

  detectChanges();
});

let lastLength = $('#emailAux').val().length;

$('#email').on('input', function(e) {
  let countSymbol = $(this)
    .val()
    .match(/@/g);
  if (countSymbol) {
    if (countSymbol.length == 1) {
      if ($('.autocomplete-content').is(':visible')) {
        $('#emailAux').val($('#email').val().substr($('#email').val().indexOf('@')));
        $('#emailAux').trigger(
          jQuery.Event('keyup', {
            keycode: 13
          })
        );
      } else {
        $('#emailAux').val('@');
        $('#emailAux').text('@');
        $('#emailAux').trigger(
          jQuery.Event('keyup', {
            keycode: 13
          })
        );
        $('.autocomplete-content').show();
        e.stopPropagation();
      }
      lastLength = $('#emailAux').val().length;

    } else {
      $('.autocomplete-content').hide();
    }
  } else {
    $('.autocomplete-content').hide();
  }
});

$('#email').on('blur', function(e) {
  $('#emailAux').blur();
});

let intervalID = null;

intervalManager(true, detectChanges, 1);

function intervalManager(flag, animate, time) {
  if (flag) intervalID = setInterval(animate, time);
  else clearInterval(intervalID);
}

function detectChanges() {
  if ($('#emailAux').val().length - lastLength > 1) {
    $('#email').val($('#email').val().substr(0, $('#email').val().indexOf('@')) + $('#emailAux').val());
    $('#email').focus().blur();
    intervalManager(false);
    $('#emailAux').val('');
    intervalManager(true, detectChanges, 1);
  }
}

.autocomplete-content {
  display: none;
}

.aux {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col l6">
    <input type="email" id="email" class="validate" autocomplete="off">
    <input id="emailAux" class="aux" autocomplete="off">
    <label data-error="E-mail invalido!" data-success="E-mail valido!" for="nome">E-mail</label>
  </div>
</div>