Django Autocomplete light & taggit — настраиваемый стиль результатов

Я использую django-autocomplete-light с django-taggit. Интеграция очень проста, если вы будете следовать документации:

import autocomplete_light
from taggit.models import Tag
autocomplete_light.register(Tag)

а также

class NewActivityForm(forms.ModelForm):
    tags = TagField(widget=TagWidget('TagAutocomplete'))
    [...]

Это создает красивый виджет в стиле встроенного стиля, где вы печатаете, и вы видите список автозаполнения ниже — все в порядке.

Однако мои теги имеют цветовую кодировку, поэтому мне нужно настроить две вещи:

а) Во-первых, в списке автозаполнения мне нужно настроить класс css для каждого тега. Я получаю некоторый контроль над шаблоном, но кажется, что есть селекторы css, которые ищут [значение данных], которые переопределяют мои классы. Код для autocomplete_template_html:

<div>
    {% for choice in choices %}
        <span class="tag tag--{{choice.pk}}" data-value="{{choice.pk}}" >{{choice}}</span>
    {% endfor %}
</div>

б) Во-вторых, после того, как тег выбран и добавлен к моему входу, мне нужно сохранить этот класс css, чтобы я получил собственный вид. Когда я вижу сгенерированные DOM-элементы, я вижу, что там есть скрытые промежутки, которые я мог бы использовать, но не ясно, как это сделать.

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


django-taggit django-autocomplete-light
person orestis    schedule 16.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

A) Невозможно переопределить класс CSS

Это похоже на специфичность CSS. проблема.

Я только что попробовал это, и оно работает, если оно установлено после загрузки autocomplete_light/style.css (или шаблона `autocomplete_light/static.html'):

    .yourlabs-autocomplete .choice, .yourlabs-autocomplete [data-value], .yourlabs-autocomplete em
    {   
        color: red;
    }

В противном случае вы можете просто переопределить autocomplete_light/static/autocomplete_light/style.css.

B) Стиль должен быть одинаковым при выборе варианта

Когда выбор выбран, его HTML копируется в колоду, добавляется только span.remove. Стиль должен оставаться.

Хотя было бы очень полезно, если бы вы разместили свой CSS!

person jpic    schedule 16.01.2014
comment
Итак, я хотел бы добавить дополнительный HTML-код к моему выбранному элементу в колоде в части B. Например, поле выбора, связанное с выбором автозаполнения. Я хочу, чтобы значение этого поля выбора было опубликовано при отправке формы. Как лучше всего это сделать? - person ; 11.10.2014