$(function () {  
  function mMail() {  
  var mMail = $('input').val();  
  if(mMail.length > 3 | mMail.indexOf('@') != -1) {  
  $('#all-mail').html('<div class="myMail"><i>'+mMail+'</i>@bk.ru</div><div class="myMail"><i>'+mMail+'</i>@ro.ru</div><div class="myMail"><i>'+mMail+'</i>@ya.ru</div><div class="myMail"><i>'+mMail+'</i>@me.com</div><div class="myMail"><i>'+mMail+'</i>@gmx.com</div><div class="myMail"><i>'+mMail+'</i>@list.ru</div><div class="myMail"><i>'+mMail+'</i>@mail.ru</div><div class="myMail"><i>'+mMail+'</i>@gmail.com</div><div class="myMail"><i>'+mMail+'</i>@inbox.ru</div><div class="myMail"><i>'+mMail+'</i>@lenta.ru</div><div class="myMail"><i>'+mMail+'</i>@yandex.ru</div><div class="myMail"><i>'+mMail+'</i>@yahoo.ru</div><div class="myMail"><i>'+mMail+'</i>@hotmail.ru</div><div class="myMail"><i>'+mMail+'</i>@outlook.ru</div>').show();  
  } else {$('#all-mail').hide();}  
  myMail();  
  if(mMail.indexOf('@') != -1 || mMail.indexOf('.') != -1 || mMail.indexOf(' ') != -1) {$('#all-mail').hide();}  
  };  

  function myMail() {  
  $('.myMail').click(function () {  
  var mThismail = $(this).html();  
  mThismail = mThismail.replace('<i>','').replace('</i>','');  
  $('#all-mail').hide();  
  $('input').val(mThismail);  
  });  
  $(document).click(function () {$('#all-mail').hide();});  
  };  
  $('input').keyup(function () {  
  mMail();  
  });  
  });

$('body').append('<div id="all-mail"></div>');

div#all-mail {display:none;  
  position: absolute;  
  padding: 5px;  
  background: #344149;  
  color: #fff;  
  margin: 10px 0px 0px 10px;  
  border: 1px solid #000;  
  border-radius: 2px;  
  }  
  div#all-mail:after, div#all-mail:before {  
  bottom: 100%;  
  left: 20px;  
  border: solid transparent;  
  content: " ";  
  height: 0;  
  width: 0;  
  position: absolute;  
  pointer-events: none;  
  }  

  div#all-mail:after {  
  border-color: rgba(52, 65, 73, 0);  
  border-bottom-color: #344149;  
  border-width: 8px;  
  margin-left: -8px;  
  }  
  div#all-mail:before {  
  border-color: rgba(0, 0, 0, 0);  
  border-bottom-color: #000;  
  border-width: 9px;  
  margin-left: -9px;  
  }  
  .myMail {  
  cursor: pointer;  
  padding: 2px 10px 5px 0px;  
  margin-top: 5px;  
  font-size: 12px;  
  font-family: sans-serif;  
  }  
  .myMail:hover {  
  background: rgba(0, 0, 0, 0.38);  
  }  
  .myMail i {  
  font-style: normal;  
  background: #1c90f3;  
  color: white;  
  padding: 2px 5px 5px 5px;  
  margin-right: 3px;  
  }  
  .myMail:hover i {background: forestgreen;}