JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<input type="search" id="_search_text"></input>
<p id="result"></p>

JavaScript

var emart = emart || {};

emart.emitter = {
    subscribers: {},
    on: function (event, cb, context) {
        this.subscribers[event] = this.subscribers[event] || [ ];
        this.subscribers[event].push({
            callback: cb,
            context: context
        });
    },
    off: function (event, cb, context) {
        var idx, subs = this.subscribers[event], sub;
        if (subs) {
            idx = subs.length - 1;
            while (idx >= 0) {
                sub = subs[idx];
                if (sub.callback === cb && (!context || sub.context === context)) {
                    subs.splice(idx, 1);
                    break;
                }
                idx--;
            }
        }
    },
    emit: function (event) {
        var subs = this.subscribers[event], idx = 0, args = Array.prototype.slice.call(arguments, 1), sub;
        if (subs) {
            while (idx < subs.length) {
                sub = subs[idx];
                sub.callback.apply(sub.context || this, args);
                idx++;
            }
        }
    }
};

var emart = emart || {};
emart.searchKeyword = function (options) {
	$.extend(this, options || {});
	this.init();
};
emart.searchKeyword.prototype = $.extend({
	/**
	 * [검색어] 텍스트
	 * @private
	 * @type Wrapping Element
	 */
	_welSearchInput : null,
	/**
	 * 검색어 값
	 * @private
	 * @type String
	 */
	_sSerchInputValue : null,
	/**
	 * 검색어 입력시 발생 인터벌 타이머 함수
	 * @private
	 * @type Function
	 */
	_fIntervalSearchInput : null,    
	/**
	 * @constructs
	 */
	init : function () {		
		this._assignElement();		
		this._attachEventHandlers();		
	},
	/**
	 * 엘리먼트 캐쉬
	 * @private
	 */
	_assignElement : function(){		
		this._welSearchInput = $("#_search_text");		
	},
	/*
	 * 이벤트 바인딩
	 * @private
	 */
	_attachEventHandlers : function(){
		this._welSearchInput.on("focus", $.proxy(this._onFocusSearchInput, this));
		this._welSearchInput.on("blur", $.proxy(this._onBlurSearchInput, this));		
	},
	/**
	 * 검색어 텍스트 창에 포커스 시
	 *...