CODEWITHSUNDEEP
djangodjango-taggit
user8954282
user8954282

Reputation:

How can I use taggit-selectize so that all user-made tags show up in the autocomplete?

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.

Upvotes: 3

Views: 809

Answers (2)

nuts
nuts

Reputation: 793

I shall try and give an example as lean as possible:

app/models.py:

from django.db import models
from taggit_selectize.managers import TaggableManager

class Post(models.Model):
    name = models.CharField(max_length=100)
    tags = TaggableManager()

app/views.py:

from app.models import Post
from django.views.generic import UpdateView

class PostEdit(UpdateView):
    model = Post
    fields = ['name', 'tags' ]
    success_url = '/'

app/templates/app/post_form.html:

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <form method="post">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Speichern">
</form>

{% endblock %}

{% block css %}
  {{ block.super }}
  <link href="{% static "taggit_selectize/css/selectize.django.css" %}" type="text/css" media="all" rel="stylesheet"/>
{% endblock %}

{% block javascript %}
  {{ block.super }}
    <script src="{% static "taggit_selectize/js/selectize.js" %}"></script>
{% endblock %}

and a templates/base.html:

{% load static %}<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{% static 'vendor/js/jquery-3.3.1.min.js' %}"></script>
    <!-- IMPORTANT: get jquery loaded ASAP. if you load it too late you get JS errors from the taggit-selectize. -->

    {% block css %}
    {% endblock %}
</head>
<body>

{% block content %}
{% endblock %}

{% block javascript %}
{% endblock %}
</body>
</html>

Important Note: I was having the same problems up until the point where I moved the jquery-loading up into the header.

Upvotes: 0

andyw
andyw

Reputation: 3773

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>

Upvotes: 2

Related Questions