Jquery keyup event firing more than once

Question

I'm trying to display some content from my database in a div, every time a user types a value into an input box. I'm using jquery to do this. But whenever I type something, once into the input box... the call-back function repeats, four times.

    getProducts(){
            $('.search-products').on('keyup', function(){
                const searchProducts = new SearchProducts(); 
            
                let search = $.trim($(this).val()); // get search text
                if(search!==""){
                    // let data = {search: search};
    
                    let url = '/search-for-products/' + search;
                   
                    $.ajax({
                        type: "GET",
                        url: url,
                        data: {},
                        success: function(response){
                            if(response.success){
                                searchProducts.showSearchProducts(response.products);
                            }
                        }
                    });
                }
            });
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control search-products" placeholder="What are you searching for ?" aria-label="Username" aria-describedby="basic-addon1" style="color: light grey;">

I'd like your honest opinions on what could be wrong, with my code. Cos, I'm now confused about what to do.

Answer 1

If you've not found why it's added twice, a simple fix is you can remove the listener before adding it again:

$('.search-products').off('keyup').on('keyup', ...)

You can also use namespace events, to not remove other keyup events:

$('.search-products').off('keyup.search').on('keyup.search', ...)

Not many people know that jQuery supports namespace events.