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
Google Professional Machine Learning Engineer Exam 2021
Exam Description A Professional Machine Learning Engineer designs, builds, and productionizes ML models to solve business challenges using Google Cloud technologies and knowledge of proven ML models and techniques. The ML Engineer is proficient in all aspects […]
Designing Kubernetes Controllers
There has been some excellent online discussion lately around Kubernetes controllers, highlighted by an excellent Speakerdeck presentation assembled by Tim Hockin. What I’d like to do in this post is explore some of the implications […]
React Server Components
The React Team recently announced new work they are doing on React Server Components, a new way of rendering React components. The goal is to create smaller bundle sizes, speed up render time, and prevent […]
Jolt custom java transform
Jolt is a JSON to JSON transformation library where the transform is defined in JSON. It’s really good at reorganizing the json data and massaging it into the output JSON you need. Sometimes, you just […]