How to launch JQuery/ajax action after text input - Ruby on Rails

Question

I want to be able to enter a URL into a form, without clicking submit, for the page to auto-process the URL (processing take a 3-5 seconds) and then return some information about the webpage (like title, images, etc). For example, the code would know when the user stopped typing information and then auto-process the text.

I'm using Rails 3.1. Should I have a polling function that polls 3 or 4 times per second to accept the URL? I want this site to be used by thousands of users at a time so I hope that's not too much overhead. And I worry that if a user manually enters the URL (as opposed a quick copy and paste), the auto-processor would process the URL WHILE it is still being entered.

While the processing is happening, I plan to use a 'loading' image. I feel like this has parallels to text auto-complete.

Answer 1

why don't you use something like . mousekeyclick+ keydown.. would work whether its copy paste or typing.. Also sending request on each key down is bad IMHO.

What you can do is set time out function of 0.8 seconds ( can vary depending on your requirement) after mouse/key is pressed. so within this duration if a key is not pressed then you make the request , if a key is pressed within this duration you cancel out your previous timeout function :)

Answer 2

why don't you consider the 'Enter' key on onkeyPress or onkeydown event of your textbox. You can give the instruction to your users to "write the url and press the 'Enter' key to process the request." with a label. Also you can use the settimeout method of javascript to process the requests after some interval of time.

For Eaxmple;

<input type="text" onkeypress="ProcessRequest(event)" />

and your javascript would be like this..

 <script type="text/javascript">
    function ProcessRequest(e)
    {
       if(e.keyCode == 13)// 13 is the key code of 'Enter' key
       {
           var t=setTimeout("ProcessURL()",4000);
       }
       else 
           return false;
    }
    function ProcessURL()
    {
      // your code to submit url
    }
    </script>