Login

jQuery slugify plugin

Author:
girasquid
Posted:
May 5, 2009
Language:
JavaScript
Version:
Not specified
Tags:
slug jquery slugify
Score:
7 (after 7 ratings)

This plugin lets you make a field(ideally for a slug) populate itself based on the value of another field. You use it like this:

jQuery('#id_title').slugify('#id_slug');

1
2
3
4
5
6
7
8
jQuery.fn.slugify = function(obj) {
    jQuery(this).data('obj', jQuery(obj));
    jQuery(this).keyup(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        obj.val(slug);
    });
}

More like this

  1. Django Collapsed Stacked Inlines by mkarajohn 1 week, 6 days ago
  2. Dynamically adding forms to a formset. OOP version. by halfnibble 5 years, 8 months ago
  3. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 7 years, 9 months ago
  4. Django admin inline ordering - javascript only implementation by ojhilt 8 years, 1 month ago
  5. Google v3 geocoding for Geodjango admin site by samhag 8 years, 2 months ago

Comments

gobble (on July 5, 2010):
jQuery.fn.slugify = function(obj) {
    jQuery(this).data('obj', jQuery(obj));
    jQuery(this).keyup(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        jQuery(this).data('obj').val(slug);
    });
    jQuery(this).blur(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        jQuery(this).data('obj').val(slug);
    });

}

this fixes a blank slug field if you select a entry for your lineedit from your prowsers suggestion dropdown and exit the lineedit with |tab|.

#

pmcelhaney (on May 23, 2011):

Here's a more advanced version. It takes care of a few things like converting & to "and", preventing leading or trailing spaces from becoming hyphens, and barring automatic changes after the slug has been edited manually. It also accepts an optional slugFunc parameter so you can customize how the title is converted to a slug.

https://github.com/pmcelhaney/jQuery-Slugify-Plugin

#

Please login first before commenting.