How can I prevent fast key presses triggering an event in a Python flask app?

Question

0.00/5 (No votes)

See more:

I have a python Flask app. If the user types characters into a search field fast then the wrong results can be displayed becuase there is a lag in getting the data. If another character is typed then the results are shown which are for the previous search string. This is misleading for the users.

I have been trying to find a way to prevent the event handler being called if the time between key presses is less than a defined time, but trigger the event to search the database if the time since the last key press exceeds a defined time.

What I have tried:

I haven't managed to even find a starting point of how to solve this.
I have looked in the globalscripts.js file, and don't know if I can put something in here?

JavaScript

$(function(){
    $('input[name="search"]').on('input', function(){
        $.getJSON('/lookup', {
            query: $('input[name="search"]').val(),
        },
        function(data){
            search(data);
        });
    });
});

My googling has been unsuccessful, so if someone could point me to any docs or give me any hints on this I would be very grateful.

Kind regards :)

Posted 14-Jul-22 1:57am

Jackie Lloyd

Updated 31-Jul-22 9:12am

v2

Add a Solution

Comments

0x01AA 14-Jul-22 10:02am

Most probably you can disable the input field during search. Some example code for disabling here: Disable and enable an input text box with JavaScript/jQuery | Techie Delight[^]

Jackie Lloyd 31-Jul-22 15:07pm

Hi, thank you very much for this suggestion. It actually turned out that the problem was not caused by a delay in response from the database after all, but simply down to the html not being hidden, emptied and shown at the correct times. But this was a very useful learning for me.

The solution was to add:

$("#data-container".hide()
$("#data-container".empty()

where data-container is defined in a .html file by:

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Accepted Answer · 2022-07-14T06:01:00

Solution 1

You can't stop the event from firing. You can, however, check for a minimum string length in the textbox before firing the first search request. A typical minimum that I use is 3 characters.

Next, your server-side code and database needs to be as fast as possible. If you're using "LIKE %term%" in your query, you're doing it wrong. Look into Full Text Search options for your database engine. You're server code is going to have to be changed to support Full Text queries.

Posted 14-Jul-22 6:01am

Dave Kreskowiak

Updated 14-Jul-22 6:02am

v2

Comments

Jackie Lloyd 31-Jul-22 15:13pm

I have accepted this solution as it would be a good one if I hade correctly diagnosed the problem in the first place. (I also would give it 5 stars but for some reason it only seems to allow me to select 4).

It actually turned out that the problem was not caused by a delay in response from the database after all, but simply down to the html not being hidden, emptied and shown at the correct times. But this was a very useful learning for me.

The solution was to add this into a function defined in a javascript file where the key press event in the text-box is handled, to avoid the previous valid search result being shown when a further key press means there are no search results:

Copy Code
$("#data-container".hide()
$("#data-container".empty()

where data-container is the html item which displays the search results from the database, defined in a .html file by:

I hope this makes sense to anyone else who may find this useful :)

Jackie Lloyd · Accepted Answer · 2022-07-31T09:12:00

I have accepted this solution as it would be a good one if I hade correctly diagnosed the problem in the first place. (I also would give it 5 stars but for some reason it only seems to allow me to select 4).

It actually turned out that the problem was not caused by a delay in response from the database after all, but simply down to the html not being hidden, emptied and shown at the correct times. But this was a very useful learning for me.

The solution was to add this into a function defined in a javascript file where the key press event in the text-box is handled, to avoid the previous valid search result being shown when a further key press means there are no search results:

$("#data-container".hide()
$("#data-container".empty()

where data-container is the html item which displays the search results from the database, defined in a .html file by:

I hope this makes sense to anyone else who may find this useful :)