Asked  7 Months ago    Answers:  5   Viewed   44 times

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



So, I'm going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, lets start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions...

//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 () {
  typingTimer = setTimeout(doneTyping, doneTypingInterval);

//on keydown, clear the countdown 
$input.on('keydown', function () {

//user is "finished typing," do something
function doneTyping () {
  //do something
Tuesday, June 1, 2021
answered 7 Months ago

The easiest solution is using jQuery and its $(document).ready(function() { .... }); function. Instead of .... you put your own code.

Note that it basically does the same thing @Shadow2531 suggested, but also works in old browsers not supporting that event.

Saturday, July 3, 2021
answered 5 Months ago

If you have an element thats near the bottom of the page, you can use Waypoints to trigger a function when the user scrolls to that element. Or if you want to use a pixel limit like in Hussein's post, make sure to heed the scroll lessons we learned from twitter

Monday, July 19, 2021
answered 5 Months ago

I have tried a first solution for your problem by catching the resize event With that you can know the orientation and gest is the keyboard is visible

UPDATE : adding iOS mobile safari support with LKM solution

var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;

/* Android */
window.addEventListener("resize", function() {
    is_keyboard = (window.innerHeight < initial_screen_size);
    is_landscape = (screen.height < screen.width);

}, false);

/* iOS */
$("input").bind("focus blur",function() {
    is_keyboard = $(window).scrollTop() > 0;

Now you can show and hide the logo and some line item

function updateViews() {
    if (is_keyboard) {
        if (is_landscape) {
            $("li").slice(0, 2).show();
        else {
            $("li").slice(0, 4).show();
    else {

For the JS based on this HTML

<div id="logo">Logo</div>
<input type="text"><input type="submit" value="search">

Check out my example page

Sunday, August 1, 2021
answered 4 Months ago

This is not configurable through datepicker. You would have to change the _doKeyDown method source here.

The easiest way to do this would be to extend the widget. It would look something like this:

$.extend($.datepicker, {
     _doKeyDown: function(event){
           //copy original source here with different
           //values and conditions in the switch statement
Sunday, September 19, 2021
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :