JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="content">
  <p>&nbs;</p>
  <input type="text" id="search-input" />
  <div id="suggestions">
  </div>
</div>

JavaScript

var autoCompleteTimer = false;

function timerHandler(text) {
	var searchValue = $('#search-input').val();
	$('#suggestions').html('Search Text: ' + searchValue);
}

$('#search-input').on('keyup', function(e) {
	if (autoCompleteTimer) {
  	window.clearTimeout();
  }
  
  window.setTimeout(timerHandler, 300);
	autoCompleteTimer = true;
})