CannedText Efficient text entry in form letter textareas with text completion and customizable tab stops



To test out the plugin, simply start typing above. You can trigger the quick text with either ";;testing" or ";;thanks", or clicking the quick text button above.

You will notice that once a canned text entry has been made, it automatically expands to the full text of the canned text and highlights the first tab stop for you to start typing into immediately (side note: the textarea also scrolls to the tab stop…if necessary). From there you can make your entry and press the tab key to either be a) taken to the next tab stop; or b) taken on to the next input on the page.

This is my first jQuery plugin, and I would love to hear your feedback. Please send me a tweet and let me know what you think!

View Project on Github

Example that is running above:

$(document).ready({
  $('#demo').cannedtext({
    phrases: function () {
      var phrases = [];
      $.ajax({
        url: 'phrases.json',
        dataType: 'json',
        async: false,
        success: function (json) {
          phrases = json;
        }
      });

      return phrases;
    }
  });
  $('.cannedtext').click(function(e) {
    e.preventDefault();
    $('#demo').val($('#demo').val() + ' ' + $(this).attr('rel'));
    setTimeout(function() {
      $('#demo').focus().trigger('keydown');
    }, 10);
  });
});

Example with custom tab stop start and end tags:

$(document).ready({
    $('#demo').cannedtext({
      tabstop_start: '[[',
      tabstop_end: ']]',
      phrases: [
        {key: ';;testing', txt: "Just one [[ example ]] in this one"}
      ]
    });
  });

While currently skimpy, I'm looking for ideas to expand these, so please send them in!

$.fn.cannedtext.defaults = {
    tabstop_start: '{{',
    tabstop_end: '}}',
    phrases: [callback or array]
  };