This plugin is pretty simple. It adds a jQuery Event to all your text and textarea fields that fires when a user has finished (or paused while) entering text into that field. This is good for processing-intensive actions — things like making Ajax calls or filtering large datasets on a page.

The plugin is out on github and dual licensed under GPL and MIT.

This plugin is does nothing on its own. It’s useful, however, for writing other plugins, or handling state change when that event happens. For example: a search field that makes Ajax calls to retrieve filtered data for a suggestion list, such as Google’s instant search (http://www.google.com/instant/).

There are similar plugins out there - Ben Alman has a good one for throttling functions generally, and there used to be a plugin called TypeWatch that is more specifically tailored to this kind of thing, which seemed to fall of the face of the internet at some point in the past few months. textentered.js is extremely similar to TypeWatch in the underlying mechanics, but fundamentally different in the approach. With TypeWatch, you were tightly coupling your JavaScript methods to the instantiation of TypeWatch. Not so with textentered.js.

To listen for the event, just use jQuery’s .bind method, i.e.$('#filterField').bind('textentered', function() { filterResults(); });You can also have other event code trigger the event:

$('input[name="filterRadioButton"]').change( function() {
   $('#filterField').trigger(‘textentered’);
});

To override the default behavior, pass in a set of parameters:

$('#filterField').textentered({
   trimValue: false, // ignore whitespace when deciding when event is triggered? Default: true
   idleDelay: 200, // how long to wait between keystrokes before firing; default: 490
   minLengthToTrigger: 5 // how many characters need to be there before firing; default: 0
}).bind('textentered', function() { filterResults(); });

Some examples:

Filtering a list: default settings

Text filter:

• Aardvark
• Aaron Rogers
• Buffalo
• Crocodile
• Dill pickle
• Eels
• Frogs
• Gazelles

No results match

Source:

$('#textFilter').bind('textentered', function() {
   var filterVal = $('#textFilter').val().toUpperCase();
   var hasResults = false;
   $('#results li').each( function(index, elem) {
      var $elem = $(elem);
      if (filterVal == '' || $elem.html().toUpperCase().indexOf(filterVal) != -1) {
         $elem.show();
         hasResults = true;
      } else {
         $elem.hide();
      }
   });
   hasResults ? $('#noresults').hide() : $('#noresults').show();
});

$(‘#textFilter’).bind(‘textentered’, function() { var filterVal = $(‘#textFilter’).val().toUpperCase(); var hasResults = false; $(‘#results li’).each( function(index, elem) { var $elem = $(elem); if (filterVal == ” || $elem.html().toUpperCase().indexOf(filterVal) != -1) { $elem.show(); hasResults = true; } else { $elem.hide(); } }); hasResults ? $(‘#noresults’).hide() : $(‘#noresults’).show(); });

Loading a Google Maps image: minimum 5 characters, slowed down to 750ms

Location: Google Map result:

Source:

$('#mapField').textentered({ idleDelay: 750, minLengthToTrigger: 5 })
             .bind('textentered', function() {
                var newImageUrl = 'http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap¢er=' + escape($.trim($('#mapField').val())) + '&zoom=11&size=400x300&sensor=false';
                $('#mapImage').html('![](' + newImageUrl + ')');
             });

$(‘#mapField’).textentered({ idleDelay: 750, minLengthToTrigger: 5 }) .bind(‘textentered’, function() { var newImageUrl = ’http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap¢er=’ + escape($.trim($(‘#mapField’).val())) + ‘&zoom=11&size=400x300&sensor=false’; $(‘#mapImage’).html(’’); });

Hopefully, this will save you some time and energy when modeling this kind of user interaction.