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 search = {
    val: '',
    buf: '',
    checkResult: function() {
        if (this.buf != this.val) {
            this.buf = this.val;
            this.getResult.call(search, this.val);
        }
    },
    getResult: function (result) {
        $('.res').text(result);
        alert('interval');
    }
}

$('.search')
.on('keyup change', function(event) {
    search.val = $(this).val();
})
.on('focusin', function(event) {
    search.interval = setInterval(function() {
      search.checkResult.call(search);
    }, 2000);
})
.on('focusout', function(event) {
    clearInterval(search.interval);
});