TypeWatch: jQuery Plugin

Published 8/17/2007 by Denny in Client-Side

Earlier this week I created a jQuery plug-in that allows you to potentially determine when a user has finished typing in a textbox. I created it for a search textbox on one of my websites so that I could return results by firing some AJAX after they're done typing. It could help with an AJAX auto-complete implementation too.

[UPDATED 05/16/08]

There are 4 settings you can set:

1. callback: The function to callback after the user has "finished" typing. Default void.
2. wait: The number of milliseconds to wait before the plugin considers that typing has finished. Default 750.
3. highlight: Aesthetics, determines if the text should be highlighted when the textbox receives focus. Default true.
4. captureLength: The minimum amount of characters necessary before allowing the event to fire. Default 2.

How it works:

For each textbox or textarea matched through jQuery it creates a timer which gets reset upon every [KeyDown] event. If the timer's [wait] is reached then the user has finished typing, or stopped typing long enough for the timer to reach its [wait] interval.

The callback will not execute if the length of text is less than captureLength. Also, if the timer's [wait] interval is reached and the text has not changed it will not execute the callback. So if you change "some text" to "SOME TEXT" the callback will not execute. The callback will be executed when the ENTER key is pressed on single-line INPUT elements.

You can get the debug and packed version at: http://jquery.com/plugins/project/TypeWatch

The latest version 2.0.0 is a complete refactor of code and includes a few issue fixes. Code has been refactored thanks to Charles Christolini - BinaryPie.com

DEMO:

Click here for the Live Demo

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Comments

velosite

Friday, September 21, 2007 9:25 PM

velosite

gostaria que vc entendesse

Steve

Tuesday, September 25, 2007 10:37 PM

Steve

The above code no longer works as of jQuery 1.2. You can use this instead:

jQuery.fn.typeWatch = function(wait, fire) {
  this.each(function() {
    var input = this;
    var timeout;    
    
    $(input).keyup(function() {
      clearTimeout(timeout);
      timeout = setTimeout(function() { fire(); }, wait)
    });
    
  });
  return this;
}

//use like
$(input).typeWatch(200, function() { alert('You finished typing') });

julien-verkest.fr

Thursday, November 22, 2007 12:43 PM

pingback

Pingback from julien-verkest.fr

Julien Verkest » 240 plugins jQuery

propiedadprivada.com

Wednesday, December 05, 2007 2:38 PM

pingback

Pingback from propiedadprivada.com

Propiedad Privada  » Blog Archive   » 240 Plugins para jQuery

teo.com.br

Tuesday, January 01, 2008 1:38 PM

pingback

Pingback from teo.com.br

Diversos Links para desenvoledores de javascript | Blog do teo

v-campus.cn

Sunday, January 27, 2008 5:52 AM

pingback

Pingback from v-campus.cn

风筝博客

i-noova.com

Sunday, February 17, 2008 5:26 PM

pingback

Pingback from i-noova.com

Ressources pour le développement web et WordPress » i-noova*

blogdavid.freehostia.com

Monday, March 03, 2008 1:07 PM

pingback

Pingback from blogdavid.freehostia.com

Recursos y Tutoriales  » Blog Archive   » 240 plugins de jquery increible!!

kollermedia.at

Friday, March 14, 2008 2:38 PM

pingback

Pingback from kollermedia.at

The ultimate jQuery Plugin List | Kollermedia.at

blog.fj18.com

Monday, March 17, 2008 9:30 AM

pingback

Pingback from blog.fj18.com

Grom’s home  » Blog Archive   » [转]240多个jQuery插件

xilo.cn

Friday, March 28, 2008 6:56 AM

pingback

Pingback from xilo.cn

jQuey插件 | xilo's blog

mashuphowto.wordpress.com

Sunday, March 30, 2008 7:20 PM

pingback

Pingback from mashuphowto.wordpress.com

La boîte à outils du codeur de site Web « Mashuphowto’s Weblog

jcold.com

Wednesday, April 02, 2008 4:37 AM

pingback

Pingback from jcold.com

强烈推荐:240多个jQuery插件 at 备忘库-冷

volkansenturk.com

Wednesday, April 09, 2008 12:56 PM

pingback

Pingback from volkansenturk.com

240 adet jquery ekelntisi - Volkan Şentürk

css4design.com

Wednesday, April 23, 2008 7:19 PM

pingback

Pingback from css4design.com

» 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : des css pour votre design html

sapling.wordpress.com.cn

Monday, April 28, 2008 6:48 PM

pingback

Pingback from sapling.wordpress.com.cn

jQuery插件集合.(240) | Sapling soliloquize

net0951.com

Saturday, May 03, 2008 7:32 AM

pingback

Pingback from net0951.com

强烈推荐:240多个jQuery插件  - 胡言乱语

Oktay Acikalin Germany

Tuesday, May 06, 2008 5:46 PM

Oktay Acikalin

i've added another option "minchars" so that we can fire the event even at 0 chars. shall i send it to you or do you update it yourself? Smile

sastgroup.com

Tuesday, May 13, 2008 9:33 PM

pingback

Pingback from sastgroup.com

sastgroup.com  » Blog Archive   » 240 plugins jquery

Denny United States

Saturday, May 17, 2008 12:03 AM

Denny

New version has many fixes Smile

Oktay Acikalin Germany

Saturday, May 17, 2008 12:56 AM

Oktay Acikalin

thanks Smile
right now im writing a plugin-system for aurora and am building some packages. i'm putting it right in Smile.

blog.colomove.com

Saturday, May 17, 2008 9:10 AM

pingback

Pingback from blog.colomove.com

240 plugins jquery | Computer and Technoloy News

JK

Thursday, May 22, 2008 9:10 AM

JK

Is there a way to re-capture the previous timer object in the new version, so that it can be cleared externally?
It worked with the old version, where the timer is saved as window[this.typewatchid].
Is there a "better" way of doing so, without going back and add the old code into the new and better implementation?

Denny United States

Friday, May 23, 2008 8:12 PM

Denny

Hey JK what is the purpose of clearing it externally?

Martin Pärtel Finland

Monday, May 26, 2008 5:22 PM

Martin Pärtel

Hi,
Thanks for this nice plugin.

Two issues I noticed:
- I've seen references to an 'enterkey' and a 'captureEnter' option but they don't seem to be implemented.
- In the callback, I'd like to access the element being edited via 'this'. Right now I only get the text as the parameter.

Also, shouldn't the file be named jquery.typewatch.js for consistency with other jQuery plugins?

Thanks!

Denny United States

Wednesday, May 28, 2008 9:40 AM

Denny

Hi Martin,
To address your issues:

1. captureEnter was removed in version 2. TypeWatch now always captures the enter key on single-line input elements.
2. That's a good idea! I won't have a fix up right now but if you want to make the change yourself you just need to edit one line in the javascript file:

In the checkElement function change
timer.cb(elTxt);
to
timer.cb.apply(timer.el, elTxt);

And I think that should do it.

I'll release the next version with the change and I will be modifying the name of the script to be consistent with the other plugins. Thanks for your time!

zhaipeng.cn

Wednesday, May 28, 2008 11:49 AM

pingback

Pingback from zhaipeng.cn

翟鹏的博客 » 240个JQuery插件

魔兽世界私服 People's Republic of China

Saturday, June 14, 2008 5:52 AM

魔兽世界私服

Thanks for your time!

blox.svbasi.com

Saturday, June 28, 2008 5:27 PM

pingback

Pingback from blox.svbasi.com

Blox.Svbasi · 240 plugins jQuery

hiddenpixels.com

Monday, June 30, 2008 12:37 PM

pingback

Pingback from hiddenpixels.com

Hidden Pixels -   JQuery Examples

jquerytips.com

Tuesday, July 01, 2008 7:57 PM

pingback

Pingback from jquerytips.com

jQueryTips » รวมฮิต jQuery Plugins มากกว่า 200 รายการ

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading



Denny Dot Net

Mmmmmm.... ASP.NET Code