JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<input class='search' type="text" placeholder='поиск'>
<div class="res"></div>

CSS

.search, .res {
    font-size: 16pt;
}

.res {
    width: 275px;
    height: 18pt;
    margin-top: 50px;
    outline: 2px solid black;
}

JavaScript

var intevalSearch;

var getResult = function(val, buf, context) {
    var $context = context;
    
    if (buf != val) {
        $context.data('buf') = val;
        $('.res').text(val);
        alert('interval');
    }
}

$('.search')
.on('keyup change', function(event) {
    $(this).data({
        val: $(this).val()
    });
})
.on('focusin', function(event) {
    var $this = $(this);
    
    intevalSearch = setInterval(function() {
        var data = {
            context: $this,
            val: $this.data('val'),
            buf: ($this.data('buf') || '')
        }

        getResult(data.val, data.buf, data.context)
    }, 2000);
})
.on('focusout', function(event) {
    clearInterval(intevalSearch);
});