A jQuery companion for django-taggit, matching its method of parsing. Excluding edge cases, the following quote covers the basic principle:
"If any tag name which isn't being quoted contains whitespace, the resulting string of tag names will be comma-delimited, otherwise it will be space-delimited."
Add jquery-taggit
and related dependencies to your html. Add an id or
class to your taggit input form field, e.g. #tags
, and give each tag
suggestion a class name, say .taggit-tag
:
<input id="tags" name="tags" type="text" value="apple, cat"></input>
<ul id="suggested-tags">
<li class="taggit-tag">apple</li>
<li class="taggit-tag">ball</li>
<li class="taggit-tag">cat</li>
<li class="taggit-tag">dog</li>
</ul>
Then call taggit
on the tag input field with tag_selector
set to the
jQuery selector for the tag suggestion elements:
$( "#tags" ).taggit( { tag_selector: "#suggested-tags .taggit-tag" } );
Clicking a tag will add/remove the class name taggit-tag-used
for it.
If the tag input field has an initial value defined, calling taggit
will automatically mark all matching tag suggestions with the
taggit-tag-used
class name.
JQuery-taggit
has three types of case handling. Django-taggit
is case-sensitive by default and thus this mode is also the default here.
-
Case-sensitive (default):
$( "#tags" ).taggit( { ..., case_handling: "case-sensitive" } ); Apple, apple, dog, Dog => Apple, apple, dog, Dog
-
Case-insensitive:
$( "#tags" ).taggit( { ..., case_handling: "case-insensitive" } ); Apple, apple, dog, Dog => Apple, dog
-
Lower-case:
$( "#tags" ).taggit( { ..., case_handling: "lower-case" } ); Apple, apple, dog, Dog => apple, dog
jQuery
jQuery.timers
QUnit
(only for testing)
Open example/test.html
in a web browser. All QUnit
tests should be
expected to pass.
- Show tag suggestions while typing.
- Testing for functionality beyond django-tagging compatibility.