Save 1 second after Form Change (includes ajax call)

Debouncing form input change

by Kirubel Girma

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;1,600;1,900&display=swap" rel="stylesheet">

<div class="cn_full">
  <div class="con_textbox">
    <h1 class="lbl_h1"><img src="https://emojiguide.org/images/emoji/h/1ikaa3b1iz96mh.png" alt="Hi Emoji" class="im_hiemo"/>Hiya there! How can I help you?</h1>
    <input type="text" name="" id="txt_inputFld" class="txt_debounce">
  </div>
</div>

CSS

body {
  margin: 0;
}

.cn_full {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #3f51b5;
  height: 100%;
  width: 100%;
}

.con_textbox {
  display: flex;
  flex-direction: column;
  margin: 0em 1em;
}

.im_hiemo {
  width: 1em;
  margin-right: .5em;
}

.lbl_h1 {
  color: white;
  font-weight: 200;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5em;
}

.txt_debounce {
  padding: .5em;
  outline: none;
  border: none;
  background: white;
  border-radius: .2em;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
}

JavaScript

var debounce

$('#txt_inputFld').on('input', function(event) {
 		//$('.lbl_h1').html('Typing...') use this if you want to have typing mode
		clearTimeout(debounce);
   	debounce = window.setTimeout(function() {
    $('.lbl_h1').html(event.target.value)
  }, 500);
});

//document.getElementById("txt_inputFld").addEventListener('input', function(event){
//	alert(event.target.value)
//});