Using Debounce for Keypress events in Autocomplete

<div class="status-key">Type here. I will detect when you stop typing</div>
<input type="text" class="autocomplete">
<div class="status-ajax"></div>



var $statusKey = $('.status-key');
var $statusAjax = $('.status-ajax');
var intervalId;

// Fake ajax request. Just for demo
function make_ajax_request(e){
var that = this;
$statusAjax.html('That\'s enough waiting. Making now the ajax request');

intervalId = setTimeout(function(){
$statusKey.html('Type here. I will detect when you stop typing');
$(that).val(''); // empty field

// Event handlers to show information when events are being emitted
.on('keydown', function (){

$statusKey.html('Waiting for more keystrokes... ');

// Display when the ajax request will happen (after user stops typing)
// Exagerated value of 1.2 seconds for demo purposes, but in a real example would be better from 50ms to 200ms
_.debounce(make_ajax_request, 1300));

You can use throttle or requestAnimationFrame techniques for constant flow of event every so often. ​

Full article & credit to source:

Leave a Reply