JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<input type="text" name="email" class="emailAutocomplete" size="60" />
JavaScript
$(function() {
var emaildomains = ['chollian.net',
'daum.net',
'empal.com',
'facebook.com',
'freechal.com',
'gmail.com',
'hanmir.com',
'hotmail.com',
'korea.com',
'lycos.co.kr',
'nate.com',
'naver.com',
'netian.com',
'paran.com',
'unitel.co.kr',
'yahoo.co.kr'];
$('input.emailAutocomplete').autocomplete({
minLength: 0,
source: function(request, response) {
var mail_regex = /^([a-z\d_\+\.]+)@([a-z\d\-\.]*)$/;
var match = mail_regex.exec(request.term);
if(!match) return false;
var matcher = new RegExp('^' + match[2], 'i');
response(
$.grep(emaildomains, function(item) {
return matcher.test(item);
})
);
},
focus:function() {
return false;
},
select: function(event, ui) {
this.value = this.value.replace(/@.*$/, '@') + ui.item.value;
return false;
}
});
});