How to trigger an ajax request when the user has finished typing in a text box

0 votes
I want to trigger an ajax request when the user has finished typing in a text box. I don't want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests, however I don't want them to have to hit the enter button either.

Is there a way so I can detect when the user has finished typing and then do the ajax request?

Using jQuery here! Dave
Sep 18, 2020 in Java-Script by kartik
• 37,530 points
2,101 views

1 answer to this question.

0 votes

Hello @kartik,

Use the code below:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Hope it helps!!

Thank You!!

answered Sep 18, 2020 by Niroj
• 82,820 points

Related Questions In Java-Script

0 votes
1 answer

How to manage a redirect request after a jQuery Ajax call?

Hii kartik, You can resolved this issue like ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,820 points
14,623 views
0 votes
1 answer

How can we detect timeout on an AJAX (XmlHttpRequest) call in the browser?

Hii, In order to handle a timeout: var xmlHttp ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,820 points
2,345 views
0 votes
1 answer

How to Get values from a specific user - queryset in Django?

Hello @kartik, You can get the list of Users ...READ MORE

answered May 28, 2020 in Java-Script by Niroj
• 82,820 points
4,006 views
0 votes
1 answer

How to find event listeners on a DOM node when debugging or from the JavaScript code?

Hii @kartik, It is possible to list all ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,820 points
25,807 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,820 points
9,850 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,820 points
1,098 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,820 points
886 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,820 points
11,030 views
0 votes
1 answer

How to send data in request body with a GET when using jQuery $.ajax()?

Hello @kartik, Sending the data in your scenario,I ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,820 points
10,452 views
0 votes
1 answer

How to implement useEffect() so the list on the front page updates only when a name change has been detected?

Hello @kartik, Instead of passing the entire object ...READ MORE

answered Jun 1, 2020 in Java-Script by Niroj
• 82,820 points
212 views