Home/ Questions/Q 6660569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:10:18+00:00

I have a text box for searching my photos website. As a user types,

  • 0

I have a text box for searching my photos website. As a user types, instead of showing a list of suggestions, I would like to show a count of results, informing my user that there are photos for what they are typing.

I will add an ‘onChange’ event to my text box, that will call my AJAX function. The function will then gather what has been typed already, AJAX it to my ASP page that produces the count and posts it back to display.

I know how to accomplish this but I don’t know how it will work on performance. The problem I foresee is if the user types a really long string, really quickly, it might have to do 50 calls (for each character in string). The ASP/SQL search query, that produces the count, is also very large, and can take between 0.8 – 1.0 seconds to produce a count.

Is this going to cause me problems? How will this actually work? If the user is typing character 42, will the AJAX still be processing character 12, trying to catch up with the user? Will it jam? If another call is made does it cancel the old one if it hasn’t got a response?

Any suggestions/experiences gratefully received.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The solution that I typically provide for my own applications is to ONLY initiate an ajax request after the user has stopped typing for a certain period of time (say, 0.75 seconds). For every keystroke, [re]start a javascript timeout (setTimeout) for some time (perhaps 0.75 seconds). Each keystroke that a user generates cancels this timeout and restarts it. This way the ajax will only happen after the user hasn’t typed anything for that period of time (0.75 seconds). Here is some code to demonstrate.

    var __global_timeout = null;
function getResultCountWrapper () {
    if (__global_timeout)
        clearTimeout(__global_timeout);
    __global_timeout = setTimeout(getResultCount, 0750);
}

function getResultCount () {
    // ajax call goes here.
}

    This is what you would place on your text input box.

    <input type="text" onchange="getResultCountWrapper()";>

    Here is a complete web page that works as advertised:

    <html>
  <head>
    <script type="text/javascript">
      var __global_timeout = null;
      function getResultCountWrapper () {
        if (__global_timeout)
          clearTimeout(__global_timeout);
        __global_timeout = setTimeout(getResultCount, 0750);
      }

      function getResultCount () {
        // ajax call goes here.
        alert('wee');
      }

    </script>
  </head>
  <body>
    <input type="text" onchange="getResultCountWrapper()";>
  </body>
</html>
    • 0