Auto-complete/auto-suggestion for django-taggit.
With django-taggit
, you can attach tags in any Django models. However, user experience is not that good as it uses
comma to separate multiple tags in same form field, and resulting in duplicate tags eg. Himalaya vs. Himalayas, Sublime-Text vs. Sublime Text etc.
And you probably want auto-complete/auto-suggest feature when user types some characters in tag field. Thanks to selectize.js, we got that covered :)
Install taggit-selectize:
pip install taggit-selectize
Put taggit_selectize
in settings:
INSTALLED_APPS = (
'django.contrib.admin',
...
...
'taggit',
'taggit_selectize',
)
Configured Taggit in your Django settings to use a custom string-to-tag parser that doesn't parse on spaces to match the functionality of Selectize.js, and a custom tag joiner that supports configurable delimiters.
TAGGIT_TAGS_FROM_STRING = 'taggit_selectize.utils.parse_tags'
TAGGIT_STRING_FROM_TAGS = 'taggit_selectize.utils.join_tags'
Update urls.py.
urlpatterns = [
...
url(r'^taggit/', include('taggit_selectize.urls')),
url(r'^admin/', include(admin.site.urls)),
...
]
Use the TaggableManager
from taggit_selectize (instead of taggit) in your models.
from taggit_selectize.managers import TaggableManager
class MyModel(models.Model):
tags = TaggableManager()
In your settings.py (these are defaults):
TAGGIT_SELECTIZE = {
'MINIMUM_QUERY_LENGTH': 2,
'RECOMMENDATION_LIMIT': 10,
'CSS_FILENAMES': ("taggit_selectize/css/selectize.django.css",),
'JS_FILENAMES': ("taggit_selectize/js/selectize.js",),
'DIACRITICS': True,
'CREATE': True,
'PERSIST': True,
'OPEN_ON_FOCUS': True,
'HIDE_SELECTED': True,
'CLOSE_AFTER_SELECT': False,
'LOAD_THROTTLE': 300,
'PRELOAD': False,
'ADD_PRECEDENCE': False,
'SELECT_ON_TAB': False,
'REMOVE_BUTTON': False,
'RESTORE_ON_BACKSPACE': False,
'DRAG_DROP': False,
'DELIMITER': ','
}
The minimum number of characters the user needs to type to cause an AJAX request to hit the server for autocompletion. Default: 2
The maximum number of results to return to the user for recommendation. Default: 10
A tuple of CSS files to include on any page that has the taggit-selectize widget on it. Default: ("taggit_selectize/css/selectize.django.css",)
A tuple of JS files to include on any page that has the taggit-selectize widget on it. Default: ("taggit_selectize/js/selectize.js",)
Options that are passed directly to selectize.js. Please see the selectize.js documentation for explanation
Adds a remove button to each tag item by including the 'remove_button' plugin.
Adds the 'restore_on_backspace' plugin to selectize.js.
Adds the 'drag_drop' plugin to selectize.js. WARNING: This requires JQuery UI (Sortable) to be installed. If it's not, then selectize.js will throw an error in the console and refuse to run.
Set the delimiter between tags, for example, ';' or '|'. Make sure you have set up the custom TAGGIT_STRING_FROM_TAGS for this to work properly with Taggit. Default is comma, ','.
There is demo app included example_app
.
cd example_app
python manage.py migrate
python manage.py runserver
Login username: admin
password: admin
0.x Initial release with Django 1.5 - 1.8 support. Latest upload on this series is 0.1.2
. Use this if you need old Django support.
1.x Release with Django 1.9 support.
2.x This version might introduce backward incompatibility. It improves the way it works (widget instead of admin overrride) and adds many new features Thanks a ton to Nathan.