Как я могу использовать taggit-selectize, чтобы все созданные пользователем теги отображались в автозаполнении?

Я нашел этот проект https://github.com/chhantyal/taggit-selectize и он, кажется, делает то, что я хочу, но пример приложения неполон, поэтому я не знаю, как его использовать. В основном я хочу, чтобы пользователи могли писать свои собственные теги для сообщения, и если они будут печатать тот, который ранее использовался кем-то другим, он будет отображаться в автозаполнении. Я также хочу функцию поиска, которая будет использовать автозаполнение таким же образом. Я уверен, что это не очень сложно, но readme только объясняет, как установить и что некоторые вещи значат, и я искал очень минимальный рабочий пример, который делает автозаполнение работающим.

Заранее спасибо.

Источник

1 ответ

У меня очень специфический вариант использования. Я надеюсь, что мой пример не слишком усложняет ситуацию (я добавляю дополнительные поля в мою модель Taggit). Помните, что вам может потребоваться загрузить CSS и JS в ваш HTML, в соответствии с этой проблемой. Я использую Джанго Хрустящие Формы.

В настройках моего приложения:

    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": ",",
    }

В моем jobboard / 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)

В моих URL:

url(r'^hirer/new/$', NewJobView.as_view(), name='hirer_new_job')

В моем jobboard/views.py:

class NewJobView(FormView):
    template_name = 'jobsboard/new_edit_job.html'
    form_class = NewAndEditJobForm

В моей jobboard/forms.py:

class NewAndEditJobForm(ModelForm):

    class Meta:
        model = Job
        fields = ('tags',)

Для моей доски объявлений /templates/jobsboard/new_edit_job.html:

{% extends "base.html" %}
{% load crispy_forms_tags %}


{% block content %}
  {{ block.super }}
   {% crispy form %}  
{% endblock content %}

для моих шаблонов / 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>
Источник

Я постараюсь привести пример как можно более скудный:

Приложение / 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()

Приложение /views.py:

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

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

приложение / шаблоны / приложение /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 %}

и шаблоны /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>

Важное примечание: у меня были те же проблемы вплоть до момента, когда я переместил jqueryзагрузка в шапку.

Источник
Другие вопросы по тегам