Tips for preventing multiple requests in your JavaScript search autocomplete feature

Question

Tips for preventing multiple requests in your JavaScript search autocomplete feature

I'm currently using the Turbolinks.visit action with the help of $(document).on("input");...

HTML

<form id="mainSearch" method="get" autocomplete="off">
    <input type="search" name="s" placeholder="Search" />
</form>

Javascript

$(document).off().on("input", "#mainSearch", function(e) {

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        var searchQuery = $(this).serialize();

        setTimeout(function(){
            Turbolinks.visit(
                homeurl+"/?"+searchQuery,
                {
                    change: ['content']
                }
            );
        },110);

        return false;
    });

Everything seems to be working correctly, but multiple requests are triggered when holding down a key.

https://i.sstatic.net/fP8PE.png

How can I prevent it from sending multiple requests while keeping the key pressed? .on("input"

javascript ajax forms turbolinks

Answer 1

Answer №1

Did you accidentally neglect to stop the previous timer?

let myTimer = null;

$(document).off().on("input", "#mainSearch", function(e) {

    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();

    let searchValue = $(this).serialize();

    clearInterval(myTimer);

    myTimer = setTimeout(function(){
        Turbolinks.visit(
            homeurl+"/?"+searchValue,
            {
                change: ['content']
            }
        );
    },110);

    return false;
});

Edit: Instead of starting from scratch, it's wise to utilize existing solutions like $.debounce().

Answer 2

Did you accidentally neglect to stop the previous timer?

let myTimer = null;

$(document).off().on("input", "#mainSearch", function(e) {

    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();

    let searchValue = $(this).serialize();

    clearInterval(myTimer);

    myTimer = setTimeout(function(){
        Turbolinks.visit(
            homeurl+"/?"+searchValue,
            {
                change: ['content']
            }
        );
    },110);

    return false;
});

Edit: Instead of starting from scratch, it's wise to utilize existing solutions like $.debounce().

Answer 3

Answer №2

If you're utilizing JQuery, consider checking out this solution which uses $.debounce

For some hands-on practice, feel free to explore these examples on http://jsfiddle.net/cowboy/cTZJU/

Answer 4

If you're utilizing JQuery, consider checking out this solution which uses $.debounce

For some hands-on practice, feel free to explore these examples on http://jsfiddle.net/cowboy/cTZJU/

Tips for preventing multiple requests in your JavaScript search autocomplete feature

Answer №1

Answer №2

Similar questions

The Outer Div Can't Contain Google Maps

Freezing Columns and Rows for a Spacious Scrollable Table

I am experiencing difficulty deleting a post due to unknown errors. Is there a way to successfully remove data from the database using the DELETE command?

Creating objects with variable-dependent values in node.js

Utilize a traditional JavaScript class to instantiate an object in Vue.js

Serving pages with Node JS and loading .js files on the client side

Using JavaScript, concatenate text from each line using a specified delimiter, then add this new text to an unordered list element

Eliminate the alert message that appears when dynamically rendering a React styled component

Which one should you begin with: AngularJS or Angular 2?

Problem with javascript querystring code

Node.js encountering issue with printing an array

Evaluating QUnit Test Cases

When dynamically loading content with ajax, dynamic content fails to function properly

Hide the load more button when there is no additional content available for Ajax loading

Steps to turn off popover functionality for a specific child element

How do I insert a variable into my email content using PHP?

Sequelize associations are not functioning optimally as expected

The catch block seems to be failing to capture the errors thrown by the fetch API

Retrieve information from a text

The concept of overloading operators in V8