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
Planning an Apache Airflow Deployment
This is part one of a five-part series addressing Airflow at an enterprise scale. I will update these with links as they are published. Airflow: Planning a Deployment Apache Airflow is a platform for authoring, […]
Rockstar Development
This originally appeared on Marty Henderson’s personal blog Or, how to use Gitpod and GitLab so that no one else has to care about your questionable coding language choices. A true rockstar has a good […]
Testing a Quarkus Kafka Application
Quarkus, a “Kubernetes Native Java stack,” enables lighter Java applications with faster startup times. In a recent post, I talked about scaling Kafka consumers in Kubernetes. Quarkus applications fit right into this picture because they […]
Gitpod and Hringvegurinn
Iceland Ever seen an advertisement for visiting Iceland? Have you noticed that they all mention Hringvegurinn or the Ring Road, as a good tour? (If you haven’t seen a tour ad for Iceland, Steindi Jr […]