Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

jQuery Tokeninput for Django forms

branch: master
README.md

jQuery Tokeninput for Django

This is reusable Django app which provides TokenField as a drop-in replacement for ModelMultipleChoiceField. It wraps the excellent jQuery Tokeninput plugin, which is by James Smith.

Quick Start

I haven't packaged this yet, so install it via GitHub for now:

$ pip install -e git://github.com/adammck/djtokeninput.git#egg=djtokeninput

Add it to your INSTALLED_APPS:

INSTALLED_APPS = (
  "django.contrib.contenttypes",
  "djtokeninput",
  # ...
)

Add the generic search view to your urlpatterns:

urlpatterns = patterns("",
  # ...
  url(r"^djtokeninput/", include("djtokeninput.urls"))
)

Add a search method to your model:

from django.db import models

class Tag(models.Model):
  name = models.CharField(max_length=100)

  @classmethod
  def search(cls, query):
    return cls.objects.filter(name__icontains=query)

Add a TokenField to your form:

from django import forms
from djtokeninput import TokenField

class ExampleForm(forms.Form):
  title = forms.CharField()
  desc = forms.CharField(widget=forms.Textarea)
  tags = TokenField(models.Tag, required=False)

Finally, add the JS and CSS assets to your template:

<head>
  <link rel="stylesheet" href="/static/css/token-input.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="/static/js/jquery-tokeninput-1.6.0-min.js"></script>
  <script src="/static/js/djtokeninput.js"></script>
</head>

Form Media

You can also use Form Media if you're into that. Just include {{ form.media }} in your <head> as usual.

I prefer to explicity include all of my assets in my base template, and pack them with Django Compressor.

Configuration

You can configure the Tokeninput by passing a TokenWidget instance to TokenField:

tags = TokenField(models.Tag, required=False,
  widget=TokenWidget(
    hint_text="Search for tags",
    prevent_duplicates=True,
    animate_dropdown=False))

The jQuery Tokeninput docs contains the list of available settings.

Requirements

  • Django >= 1.3
  • jQuery >= 1.5

License

djtokeninput is free software, available under the MIT license.

Something went wrong with that request. Please try again.