JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" completer data-separator="@" data-source="['gmail.com', 'live.com', 'yahoo.ne.jp', 'i.softbank.jp']" placeholder="メールアドレスを入力">

CSS

/*!
 * Completer v0.0.5
 * https://github.com/fengyuanchen/completer
 *
 * Copyright 2014 Fengyuan Chen
 * Released under the MIT license
 */
input{width:90%;padding:5px;}
.completer-container{background-color:#fff;border:1px solid #ccc;border-bottom-color:#39f;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:normal;list-style:none;margin:0;padding:0;position:absolute}.completer-container li{background-color:#fff;border-bottom:1px solid #eee;cursor:pointer;margin:0;overflow:hidden;padding:.5em .8em;text-overflow:ellipsis;white-space:nowrap}.completer-container .completer-selected,.completer-container li:hover{border-left:1px solid #39f;background-color:#eee;margin-left:-1px}

JavaScript

/*!
 * Completer v0.0.5
 * https://github.com/fengyuanchen/completer
 *
 * Copyright 2014 Fengyuan Chen
 * Released under the MIT license
 */

! function(a) {
    "function" == typeof define && define.amd ? define(["jquery"], a) : a(jQuery)
}(function(a) {
    "use strict";
    var b = a(window),
        c = a(document),
        d = function(b, c) {
            c = a.isPlainObject(c) ? c : {}, this.$element = a(b), this.defaults = a.extend({}, d.defaults, this.$element.data(), c), this.init()
        };
    d.prototype = {
        construstor: d,
        init: function() {
            var b = this.defaults,
                c = d.fn.toArray(b.source);
            c.length > 0 && (this.data = c, this.regexp = d.fn.toRegexp(b.separator), this.$completer = a(b.template), this.$completer.hide().appendTo("body"), this.place(), this.$element.on({
                focus: a.proxy(this.enable, this),
                blur: a.proxy(this.disable, this)
            }), this.$element.is(":focus") && this.enable())
        },
        enable: function() {
            this.active || (this.active = !0, this.$element.on({
                keydown: a.proxy(this.keydown, this),
                keyup: a.proxy(this.keyup, this)
            }), this.$completer.on({
                mousedown: a.proxy(this.mousedown, this),
                mouseover: a.proxy(this.mouseover, this)
            }))
        },
        disable: function() {
            this.active && (this.active = !1, this.$element.off({
                keydown: this.keydown,
                keyup: this.keyup
            }), this.$completer.off({
                mousedown: this.mousedown,
                mouseover: this.mouseover
            }))
        },
        attach: function(b) {
            var c, e, f = this.defaults.separator,
                g = this.regexp,
                h = g ? b.match(g) : null,
                i = [],
                j = this;
            h && (h = h[0], b = b.replace(g, ""), c = new RegExp("^" +...