I am using Keyup & change Both together and It's working fine without any issue, But the issue only is when the user stops typing and click anywhere on the body of the page ajax runs again.

Where is the problem, Anybody help me please, below is My Code

$(".eventclass").on('keyup change', function (){

    var txt = $('#search_text').val();
    var st = $('input[type=radio]:checked', '.radiostatus').val();
    var act_id = $('.actid').val();
    var child_id = $('.childid').val();

    if(txt != '' || st !='' || act_id !='' || child_id !='')
    {
        $('#maindiv').hide();
        $("#loadi").show();

        if (globalTimeout != null) {
            clearTimeout(globalTimeout);
        }

        globalTimeout = setTimeout(function() {
            globalTimeout = null;
            $.ajax({
                url:"activity_post_load.php",
                method:"post",
                data:{
                    search:txt,
                    status: st,
                    actid: act_id,
                    childid: child_id
                },
                dataType:"text",
                success:function(data)
                {

                    setTimeout(function() {
                        $("#loadi").hide();
                        $('#results').html(data);
                    }, 1000);
                }
            });
        }, 2000);
    }else{
        $('#results').html('');
        $('#maindiv').show();
    }
});

Here is HTML of Page for a better understanding, I am using input and select together

 <div >
    <div >   
    <label > Search Posts</label>  
    <input type="text" name="keysearch" id="search_text" 
    placeholder="Search by sightseeing Name"  placeholder="Search Sightseeing places" />           
    </div>
    <div >
    <label > Act_id </label>
    <select name="act_id" > 
    <option value="">PARENT</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div >
    <label > Child_id </label>

    <select name="child_id" > 
    <option value="">CHILD</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div >
    <div >
    All <input type="radio"  name="stat" 
    value="all"><br>
    Status 0 <input type="radio"  name="stat" 
    value="zero"> <br>
    Status 1 <input type="radio"  name="stat" 
    value="1">  
    </div>
    </div> 

    </div>

     <div  id="maindiv"></div>

CodePudding user response：

This behaviour is caused by how the change event works on an input (or textarea) element.

Mozilla Contributors explain it as follows:

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

[...] 4. When the element loses focus after its value was changed, but not committed

This is what happens when you click anywhere on the page: at that moment the "uncommitted" change, that was made in the input element, is committed, and the change event fires.

You can change this behaviour by listening to the input event instead of the change event. And when you do that, you don't need to listen to the keyup event anymore. So:

$(".eventclass").on('input', function () {
    // ... rest of code ...
}