Как сделать «автозаполнение» slug на фронте?

Автозаполнение" или автогенерация slug на фронтенде - это достаточно распространенная задача при использовании Django. Slug - это текстовый идентификатор, обычно используемый для создания уникальных URL-адресов для объектов модели.

Для реализации автозаполнения slug на фронтенде вы можете использовать JavaScript-библиотеку, такую ​​как jQuery или Axios в связке с Ajax-запросами.

Первым шагом я рекомендую добавить поле для ввода slug в форму или модель Django. В модели Django можно использовать поле SlugField или CharField с установленным атрибутом unique=True. Если вы создаете форму, вы можете использовать поле CharField.

После добавления поля для ввода slug на фронтенде вы можете добавить сценарий JavaScript для автозаполнения поля slug. Например, если вы используете JavaScript-библиотеку jQuery, код может выглядеть следующим образом:

$(document).ready(function() {
    $('#title-input').on('change', function() {
        var title = $(this).val();
        var slug = convertToSlug(title);
        $('#slug-input').val(slug);
    });

    function convertToSlug(text) {
        return text
            .toLowerCase()
            .replace(/[^w ]+/g, '')
            .replace(/ +/g, '-')
    }
});

В этом примере используется событие change для отслеживания изменений в поле ввода с id "title-input". Когда пользователь вводит текст в поле "title-input", сценарий преобразует его в slug-версию с помощью функции convertToSlug и записывает его в поле с id "slug-input".

Функция convertToSlug выполняет следующий преобразование:

- Приводит текст к нижнему регистру.
- Удаляет все символы, кроме букв, цифр, пробелов и знаков подчеркивания.
- Заменяет пробелы на дефисы.

Вы можете настроить этот код в соответствии с вашими требованиями и стилями.

Обратите внимание, что этот код работает только на фронтенде и не обеспечивает проверку уникальности slug. Вы все равно должны выполнять проверку на уникальность на серверной стороне, прежде чем сохранять объект модели Django.

В заключение, реализация "автозаполнения" slug на фронтенде довольно проста, и вы можете использовать различные технологии и коды для достижения желаемого результата. Однако не забывайте про безопасность и проверку уникальности slug на серверной стороне.