Denny.NET

I can haz ASP.NET goodness?

About the author

Denny Ferrassoli
Developer at Casting Networks. MCP / .NET
E-mail me Send mail
Add to Technorati Favorites

Recent comments

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008

TypeWatch: jQuery Plugin

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

Currently rated 3.7 by 30 people

  • Currently 3.733333/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Categories: Client-Side
Posted by Denny on Friday, August 17, 2007 10:23 AM
Permalink | Comments (28) | Post RSSRSS comment feed

Related posts

Comments

velosite

Friday, September 21, 2007 11:25 AM

velosite

gostaria que vc entendesse

Steve

Tuesday, September 25, 2007 12: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 2:43 AM

pingback

Pingback from julien-verkest.fr

Julien Verkest » 240 plugins jQuery

propiedadprivada.com

Wednesday, December 05, 2007 4:38 AM

pingback

Pingback from propiedadprivada.com

Propiedad Privada » Blog Archive » 240 Plugins para jQuery

chinatian.net

Wednesday, December 05, 2007 5:20 PM

pingback

Pingback from chinatian.net

chinatian › jQuery插件超级多

xawnu.cn

Wednesday, December 26, 2007 6:26 PM

pingback

Pingback from xawnu.cn

Enjoy what you have! » Blog Archive » 强烈推荐:240多个jQuery插件

teo.com.br

Tuesday, January 01, 2008 3:38 AM

pingback

Pingback from teo.com.br

Diversos Links para desenvoledores de javascript | Blog do teo

neilyi.cn

Wednesday, January 02, 2008 12:52 AM

pingback

Pingback from neilyi.cn

Jqueryçš„N个插件 » NeiLyi.cn [尼尔.易] - PHP,Jquery,代码,点滴

miaoshengliang.cn

Thursday, January 24, 2008 6:27 PM

pingback

Pingback from miaoshengliang.cn

幽谷寒泉的BLOG » Blog Archive » 强烈推荐:240多个jQuery插件

v-campus.cn

Saturday, January 26, 2008 7:52 PM

pingback

Pingback from v-campus.cn

风筝博客

szphpman.cn

Tuesday, February 12, 2008 9:31 PM

pingback

Pingback from szphpman.cn

LongWay's Blog » Blog Archive 精彩的jQuery插件

i-noova.com

Sunday, February 17, 2008 7:26 AM

pingback

Pingback from i-noova.com

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

blogdavid.freehostia.com

Monday, March 03, 2008 3:07 AM

pingback

Pingback from blogdavid.freehostia.com

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

riaeye.com

Sunday, March 09, 2008 10:30 PM

pingback

Pingback from riaeye.com

THE EYE OF RIA » jQuery 插件列表

kollermedia.at

Friday, March 14, 2008 4:38 AM

pingback

Pingback from kollermedia.at

The ultimate jQuery Plugin List | Kollermedia.at

blog.fj18.com

Sunday, March 16, 2008 11:30 PM

pingback

Pingback from blog.fj18.com

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

juyimeng.com

Wednesday, March 19, 2008 6:14 PM

pingback

Pingback from juyimeng.com

百变贝贝 » 上百个让你事半功倍的jquery插件

xilo.cn

Thursday, March 27, 2008 8:56 PM

pingback

Pingback from xilo.cn

jQuey插件 | xilo's blog

mashuphowto.wordpress.com

Sunday, March 30, 2008 9:20 AM

pingback

Pingback from mashuphowto.wordpress.com

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

jcold.com

Tuesday, April 01, 2008 6:37 PM

pingback

Pingback from jcold.com

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

volkansenturk.com

Wednesday, April 09, 2008 2:56 AM

pingback

Pingback from volkansenturk.com

240 adet jquery ekelntisi - Volkan Şentürk

css4design.com

Wednesday, April 23, 2008 9:19 AM

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 8:48 AM

pingback

Pingback from sapling.wordpress.com.cn

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

net0951.com

Friday, May 02, 2008 9:32 PM

pingback

Pingback from net0951.com

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

Oktay Acikalin de

Tuesday, May 06, 2008 7:46 AM

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

blog.woodenhead.org

Thursday, May 08, 2008 10:00 PM

pingback

Pingback from blog.woodenhead.org

互联网的自由 » jQuery 插件(转)

sastgroup.com

Tuesday, May 13, 2008 11:33 AM

pingback

Pingback from sastgroup.com

sastgroup.com » Blog Archive » 240 plugins jquery

Denny us

Friday, May 16, 2008 2:03 PM

Denny

New version has many fixes Smile

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

Friday, May 16, 2008 5:17 PM