Menu
I found this project https://github.com/chhantyal/taggit-selectize and it seems to do what I want, but the example app is incomplete, so I don't know how to use it. What I basically want is that users will be able to write their own tags for a post, and that if they are typing one that has been used before by someone else, it will show up in autocomplete. I also want a search function that will use the autocomplete in the same manner. I'm sure it's not very complicated but the readme only explains how to install and what some things mean, and I was looking for a very minimal working example that makes the autocomplete work.
Thanks in advance.
I have a very specific use case. I hope my example does not over-complicate things (I add extra fields to my Taggit model). Please be aware you may need to load css and js in your html, as per this issue. I am using Django Crispy Forms.
In my app settings:
TAGGIT_TAGS_FROM_STRING = "taggit_selectize.utils.parse_tags"
TAGGIT_STRING_FROM_TAGS = "taggit_selectize.utils.join_tags"
TAGGIT_SELECTIZE_THROUGH = "jobsboard.models.SkillTags"
TAGGIT_CASE_INSENSITIVE = True
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": False,
"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": True,
"RESTORE_ON_BACKSPACE": False,
"DRAG_DROP": False,
"DELIMITER": ",",
}
In my jobsboard/models.py:
from taggit.models import TagBase, GenericTaggedItemBase
from taggit_selectize.managers import TaggableManager
class SkillTags(TagBase):
LANGUAGE = "la"
STATISTICS = "st"
CODING = "co"
DISCIPLINE = "di"
TYPES = (
(LANGUAGE, "language"),
(STATISTICS, "statistics"),
(CODING, "coding"),
(DISCIPLINE, "discipline"),
)
type = models.CharField(choices=TYPES, default=DISCIPLINE, max_length=2)
creator = models.ForeignKey(User, null=True)
class TaggedModel(GenericTaggedItemBase):
tag = models.ForeignKey(SkillTags, related_name="%(app_label)s_%(class)s_items")
class Job(TimeStampedModel):
tags = TaggableManager(_("skillset required"), blank=True, through=TaggedModel)
In my urls:
url(r'^hirer/new/$', NewJobView.as_view(), name='hirer_new_job')
In my jobsboard/views.py:
class NewJobView(FormView):
template_name = 'jobsboard/new_edit_job.html'
form_class = NewAndEditJobForm
In my jobsboard/forms.py:
class NewAndEditJobForm(ModelForm):
class Meta:
model = Job
fields = ('tags',)
For my jobsboard/templates/jobsboard/new_edit_job.html:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{{ block.super }}
{% crispy form %}
{% endblock content %}
for my templates/base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% block css %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Your stuff: Third-party CSS libraries go here -->
{% endblock %}
{% block extrahead %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock content %}
{% block javascript %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
{% endblock javascript %}
</body>
</html>
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
