textentered.js – a simple throttling mechanism for text fields



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

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

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();
});


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


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('');
             });
    

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

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Android Development for iOS Developers
Android development has greatly improved since the early days. Maybe you tried it out when Android development was done in Eclipse, emulators were slow and buggy, and Java was the required language. Things have changed […]
Add a custom object to your Liquibase diff
Adding a custom object to your liquibase diff is a pretty simple two step process. Create an implementation of DatabaseObject Create an implementation of SnapshotGenerator In my case I wanted to add tracking of Stored […]
Keeping Secrets Out of Terraform State
There are many instances where you will want to create resources via Terraform with secrets that you just don’t want anyone to see. These could be IAM credentials, certificates, RDS DB credentials, etc. One problem […]
Validating Terraform Plans using Open Policy Agent
When developing infrastructure as code using terraform, it can be difficult to test and validate changes without executing the code against a real environment. The feedback loop between writing a line of code and understanding […]