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
Up to Spec: JavaScript Numeric Separators
Let's take a look at the proposal to add Numeric Separators to the JavaScript specification.
Using Conftest to Validate Configuration Files
Conftest is a utility within the Open Policy Agent ecosystem that helps simplify writing validation tests against configuration files. In a previous blog post, I wrote about using the Open Policy Agent utility directly to […]
SwiftGen with Image & Color Asset Catalogs
You might remember back in 2015 when iOS 9 was introduced, and we were finally given a way to manage all of our assets in one place with Asset Catalogs. A few years later, support […]
Tracking Original URL Through Authentication
If you read my other post about refreshing AWS tokens, then you probably have a use case for keeping track of the original requested resource while the user goes through authentication so you can route […]