Django Tagging Autocomplete Tag-It

9th February 2012 in Coding Tags: django, jquery, open-source, python

This is an attempt to a django reusable app that aims to be functional but flexible.

It's based on django-tagging-autocomplete and depends on django-tagging.

I wanted to implement this functionality in my django projects for some time now and I finally had the chance to work on a project that has this requirement in the specification.

I spent some time trying different plugins and in the end I've chosen jQuery Tag-it (jQuery UI widget) as it is the one that looks most well written to me.

I still needed some more functionalities which were missing in the original jQuery Tag-it plugin so I forked it, added few lines of code and pulled commits from anoter forked repository in order to add some more goodies (maximum tag length and maximum number of tags).

The code is still unstable, I will probably change few things but you could start using it so we can improve it together. Feel free to send bug reports or patches on github.

Download

The code is on github: http://github.com/nemesisdesign/django-tagging-autocomplete-tag-it

WARNING: The jQuery plugin used by this django app is a fork of the original

https://github.com/nemesisdesign/tag-it

Demo

There are no demos or sample projects yet but you can see the jquery UI widget in action here: http://aehlke.github.com/tag-it/

Features

  • Tag editing
  • Autocompletition
  • Customizable maximum tags number
  • Costomizable max length of each tag
  • Customizable minimum amount of letters before the autocompletition starts
  • Aims to be flexible (help me if you want)

Available settings

Follows an explaination of the available settings that can be specified in your settings.py.

TAGGING_AUTOCOMPLETE_MIN_LENGTH

Minimum length of the words before starting to query the database, defaults to 1.

TAGGING_AUTOCOMPLETE_REMOVE_CONFIRMATION

Highlight a tag before deleting it when pressing backspace, defaults to True.

TAGGING_AUTOCOMPLETE_ANIMATE

Animated deletion of tags, defaults to True.

TAGGING_AUTOCOMPLETE_MAX_TAGS

Maximum numbers of tags in a field. Let's say you want to limit the number of tags for each tagged item to 5 because you don't want spammers to fill your database with hundred of tags: this is for you. Defaults to 20.

This default behaviour affects all tag fields but can be overriden for specific fields by passing the max_tags argument to the field.

MAX_TAG_LENGTH

This is actually a setting of django-tagging. Limits the length of a single tag. Defaults to 50.

TAGGING_AUTOCOMPLETE_JS_BASE_URL

URL from which the static files (javascript and css) are loaded. Defaults to STATIC_URL/js/jquery-tag-it/.

TAGGING_AUTOCOMPLETE_JQUERY_UI_FILE

In case you want to load your own version of jQuery UI. Defaults to https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js.

TAGGING_AUTOCOMPLETE_CSS

A list of CSS files to style the look of the tag-field. Defaults to ['TAGGING_AUTOCOMPLETE_JS_BASE_URL/css/ui-autocomplete-tag-it.css'].

Usage

As inherited from django-autocomplete-tagging, there are two ways of using this field, a model-field and a form-widget.

Usage in models:

# models.py
from django.db import models
from tagging_autocomplete_tagit.models import TagAutocompleteTagItField

class SomeModel(models.Model):
        # max_tags defaults to TAGGING_AUTOCOMPLETE_MAX_TAGS
        # If max_tags is specified it will override the value specified in TAGGING_AUTOCOMPLETE_MAX_TAGS
        tags = TagAutocompleteTagItField(max_tags=False)

Using the form widget:

# forms.py
from django import forms
from tagging.forms import TagField
from tagging_autocomplete_tagit.widgets import TagAutocompleteTagIt

class SomeForm(forms.Form):
    # max_tags defaults to TAGGING_AUTOCOMPLETE_MAX_TAGS
    # If max_tags is specified it will override the value specified in TAGGING_AUTOCOMPLETE_MAX_TAGS
    tags = TagField(widget=TagAutocompleteTagIt(max_tags=False))

Installation

Dependancies: you need to have django-tagging already installed.

  • Put django_tagging_autocomplete_tagit on your PYTHONPATH
  • Copy the "jquery-tag-it" folder in "/STATIC_ROOT/js/". If you want to put it somewhere else specify the setting TAGGING_AUTOCOMPLETE_JS_BASE_URL in your settings.py
  • Add "tagging_autocomplete_tagit" to installed apps in your settings.py
  • Add the following line to your project's urls.py file:
    		(r'^tagging_autocomplete_tagit/', include('tagging_autocomplete_tagit.urls')),
    

TO DOs

Testing and better documentation.

Retweet

Comments

  1. 1.

    Mae Mole said:

    ( on 21st of February 2012 at 05:58 )

    Thanks for these codes! Every time I write blogs, I'm always find myself stuck with the number of tags I'm allowed to place. With customizable maximum tags number, problem solved.

  2. 2.

    INDE said:

    ( on 26th of March 2012 at 13:11 )

    thanks for this app!

  3. 3.

    Kerala said:

    ( on 2nd of May 2012 at 10:52 )

    Thank you this was exactly what I have been searching for.

Leave your comment

Categories

Let's be social

Popular posts

Latest Comments

  1. nice site i really learn a lot more power to your blog <a href="http://staying-healthy.info">healthy living</a>

    By health is wealth in Nice Skip Links Appearing on :focus with CSS

  2. Very strange bug- thanks for the fix!

    By Andrew Chart in IE8 doesn't like 1x1px semi-transparent backgrounds

  3. Completely agree about keeping it simple, sometimes people try a little too hard

    By ryan in 10 Effective Business Card Design Tips

  4. I just wanted to say that your blog has been really useful.

    By Kerala in Django: How to Retrieve Query String Parameters

  5. Thank you this was exactly what I have been searching for.

    By Kerala in Django Tagging Autocomplete Tag-It

Popular Tags

creativity django google-summer-of-code ibiza inspiration jquery nemesisdesign ninux open-source performance photo programming python security staticgenerator upload wireless-community