email_suggest.js

document.querySelector('input[type=email]').addEventListener('keyup', event => {
  const element = event.target;
  const valueParts = element.value.split('@');

  if (element.getAttribute('list') && document.getElementById(element.getAttribute('list'))) {
      document.getElementById(element.getAttribute('list')).remove();
  }
  if (valueParts.length > 1 && valueParts[0] && valueParts[1]) {
    const suggestionsId = (element.id || element.name) + 'Suggestion';
    const suggestions = makeDatalist(suggestionsId, valueParts[0], valueParts[1]);
    element.parentNode.insertBefore(suggestions, element.nextSibling);
    element.setAttribute('list', suggestionsId);
  }
});

const makeDatalist = (elementId, emailId) => {
  const suggestDomains = [
      'naver.com',
      'hanmail.net',
      'daum.net',
      'gmail.com',
      'nate.com'
  ];
  const defaultOption = document.createElement('option');
  defaultOption.setAttribute('value', emailId + '@');
  defaultOption.innerText = `${emailId}@...`;

  const element = document.createElement('datalist');
  element.setAttribute('id', elementId);
  suggestDomains.forEach(domain => {
      const option = document.createElement('option');
      const emailAddress = `${emailId}@${domain}`;
      option.setAttribute('value', emailAddress);
      option.innerText = emailAddress;
      element.appendChild(option);
  });
  element.appendChild(defaultOption);

  return element;
}